select标签用法

select标签常用功能汇总，新学相关知识点会持续更新

1、下拉列表

          <select class="select1" name="articalBelong" id="selectscf" style="margin-top: 40px;"                                   onchange="readapi(this.options[this.options.selectedIndex].text)">
                    <option>请选择服务</option>      //静态添加列表数据
          </select>

        当下拉列表的选择值改变时，触发onchange事件，并执行readapi函数

2、多行列表--非下拉展示

       <select multiple="multiple" id="selectapi" size="10" style="width: 80%; margin-top: 40px;">            
  
       </select>

      只要加上属性multiple就可以了

3、清空select标签

        $("#selectapi").empty(); //empty方法会清空所有子元素  保留自己

4、js获取select标签选中的值

         var obj = document.getElementByIdx_x(”selectapi”); //定位id

       var index = obj.selectedIndex; // 选中索引

       var text = obj.options[index].text; // 选中文本

       var value = obj.options[index].value; // 选中值

5、jQuery中获得选中select值

    第一种方式
    $('#selectapi option:selected').text();//选中的文本

    $('#selectapi option:selected') .val();//选中的值

    $("#selectapi").get(0).selectedIndex;//索引 

    第二种方式
    $("#selectapi").find("option:selected").text();//选中的文本
    $("#selectapi").find("option:selected").val();
    $("#selectapi").find("option:selected").get(0).selectedIndex;

6、动态静态添加列表数据

    例如：<script type="text/javascript">  
                 $(document).ready(function(){  
                      #foreach ($element in ${arr})
                      $("#selectscf").append("<option>$element</option>");
                     #end     
                  });

              </script>