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;

  • 相关阅读:
    UVA10765图论+点-双连通分量性质应用
    LA4287图论+ 有向图SCC+缩点
    LA5135图论+ 割点性质运用
    LA2572计算几何+离散化+面的覆盖
    LA2402暴力枚举+计算几何+四边形面积
    UVA10566计算几何+相似三角形比例函数+二分范围的辨析
    UVA11300计算几何:正n边形内的最长的线
    UVA11524平面几何+二分法+海伦公式
    LA4986三分法求出凹性函数最小值+计算几何
    胜利大逃亡--hdu --1253(bfs)
  • 原文地址:https://www.cnblogs.com/leamiko/p/2740319.html
Copyright © 2011-2022 走看看