zoukankan      html  css  js  c++  java
  • 关于 select

    <select class="" id="location">
    <option value="-1">please select...</option>
    <option value="111" label="woshi">hello</option>
    <option value="1111" label="woshi1">hello2</option>
    </select>

    <script type="text/javascript">
    #select 实际上是HTMLSelectElement类型的一个实例
    ##method:
        add(newoption, reloption)

      remove(index)

    ##property:

      {{boolean}}  multiple

      {{HTMLCollection}}  options

       {{integer}} selectedIndex  -1表示没选中 size:可见行数

    // type: 'select-one' || 'select-multiple'

      ##option 实际上是HTMLOptionElement的一个实例
      property:

         index

         label

         selected

         text value

    //var selectbox = document.form[0].location;


    var selectbox = document.getElementById('location');

    var text = selectbox.options[0].text;
    var value = selectbox.options[0].value;
    var selectIndex = selectbox.options[0].index;
    var label = selectbox.options[0].label;

    //访问选中的项
    //var selectedOption = selectbox.options[selectbox.selectedIndex];

    //selectbox.selectedIndex = -1; //不选择任何项

    //添加选项
    var newOption = new Option('Option text', 'Option Value');
    selectbox.add(newOption, undefined);

    console.log('end');

    //移除
    var clearSelectbox = function () {

    for (var i = 0; selectbox.options.length; i++) {
    selectbox.remove(0);
    }

    };


    //移动
    //appendChild

    //重排
    var optionToMove = selectbox.options[1]; //第二项

    //将第二项移动到第一项
    //selectbox.insertBefore(optionToMove, selectbox.options[options.index - 1]);

    //向后移动一项
    //selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index + 2]);

    //最后一项 移动到最后一项
    //selectbox.insertBefore(selectbox.options[selectbox.options.length - 1], selectbox.options[optionToMove.index + 2]);

    //将第二项移动到最后一项
    //selectbox.insertBefore(optionToMove, selectbox.options[selectbox.options.length]);


    selectbox.onchange = function () {
    console.log('changeing in selectbox');
    }

    selectbox.onclick = function () {
    console.log('clicking in selectbox');
    }

    selectbox.options[1].selected = true;
    //selectbox.options[2].selected = true;

  • 相关阅读:
    5.对象的简化属性
    7.函数参数默认值
    python中argparse
    VC 6.0 打开文件出错
    【UNIX程序设计教程】 阅读初体验(1)
    引以为鉴ARM开发板连线注意事项
    windows xp宿主机 + Linux 虚拟机 网络配置
    Gcc编译选项分析
    ADS下调试出现的警告信息
    S3C2440串口通讯实现
  • 原文地址:https://www.cnblogs.com/leamiko/p/2740319.html
Copyright © 2011-2022 走看看