辛夷坞

涧户寂无人,纷纷开且落

By - Christen

jQuery取得select选中的值和文本

我们的Java软件工程师笔试中包含这个题目,许久不写代码,先自己温习下:

基本操作

$("#select1").val(); //取得选中的值
$("#select1").text(); //非取得选中项的文本,不可望文生义!
$("#select1").find("option:selected").text(); //取选中的文本
//添加事件
$("#select1").change(function () {console.log("Code");});
//动态修改 option
$("#select1").prepend("<option value='0'>请选择</option>");
$("#select1").append("<option value='Val'>Txt</option>");
//Mixed with DOM
$("#select1").get(0).selectedIndex //获取Select选择的索引值

进阶测试

<form action="">
    <select name="select_date" id="select_date">
        <optgroup label="Select Date">
            <option value="0">Custom Date</option>
        </optgroup>
        <optgroup label="Or Custom Date">
            <option value="1" selected="selected"> Current Month</option>
            <option value="2"> Last Month</option>
            <option value="3"> Last 3 Months</option>
            <option value="4"> Last 6 Months</option>
            <option value="5"> Last Ever</option>
        </optgroup>
    </select>
    <div id="test">hide me</div>
</form>
$("#select_date").bind("change", function () {
    $("#test").toggle(this.value != 3);
    alert($("#select_date").find("option:selected").text() + ": " + $("#select_date").val());
})/*.change()*/;
</script>

参考:

http://api.jquery.com/selected-selector/
How do I get the text value of a selected option

Leave a Reply

Your email address will not be published.
*
*