【select】选择标签select

1.jquery/dom判断被选择的索引(index)和值(option的value)/文本值

值：

var value = $("#select").val();

索引：

//dom
document.getElementById("select").selectedIndex;
//jquery
$("#select").prop("selectedIndex");//prop()方法设置或者返回被选元素的属性和值
$("option:selected","#select").index();

     

                     prop() 方法设置或返回被选元素的属性和值。

                  当该方法用于返回属性值时，则返回第一个匹配元素的值。

                 当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

          注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。

          提示：如需检索 HTML 属性，请使用 attr()方法代替。

         提示：如需移除属性，请使用 removeProp()方法。 可查看这里：jquery prop()详解

                                     prop建议用在标签已有属性上，attr用在自定义属性上

文本值

//jquery
$("#select option:selected").text();

<select id="select">
     <option value="1"></option>
     <option value="2"></option>
     <option value="3"></option>
</select>

2.jquery绑定触发事件

     

$("select").on("change",function(){
    alert("22");
})

        对于两次都选择同一个选项 不触发该事件的解决办法：选择完成之后将选择项修改

$("select").change(function(){
        alert("1");
}).focus(function(){
$(this)[0].selectedIndex = -1;
})

  缺点是：因为设置默认选项脚标为-1，此时所选值可以为空！！

3.对于在select的option中自定义属性时的调用

<select id="select">  
     <option value="apple" num="4">苹果</option>
     <option value="banana" num="5">香蕉</option>
     <option value="watermelon" num="6">西瓜</option>
</select>

js：

$("select").change(function(){
     var index = this.selectedIndex;//获取选中option的脚标,$(this).prop("selectedIndex")亦可
     var option = this.options[index ];//获取选中项
     var number = $(option).attr("num");

});

 注意：这里不能直接使用：$(this).attr("num"); 来获取，结果只能是undefined。该方法可以获得select的id,class,用this.value 可以获取到option的value

  参看  ：这里

  参看  ：这里