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