首頁 >web前端 >js教程 >如何使用jQuery在選擇框中取得所選選項的值

如何使用jQuery在選擇框中取得所選選項的值

清浅
清浅原創
2019-01-16 14:05:472634瀏覽

可以使用jQuery中的selected選擇器來取得被選取的option元素,我們也可以從多重選取框中來進行選擇選項

如何使用jQuery在選擇框中取得所選選項的值

jQuery中的: selected 選擇器主要用於選取已選取的5a07473c87748fb1bf73f23d45547ab8 元素,我們可以透過使用jQuery中的:selected選擇器來在選擇框中取得所選選項的值




如何使用jQuery在選擇框中取得所選選項的值

如何使用jQuery在選擇框中取得所選選項的值

###############################1 ##HTML程式碼:######
  <form>
        <label>选择城市:</label>
        <select class="country">
            <option value="合肥">合肥</option>
            <option value="上海">上海</option>
            <option value="北京">北京</option>
        </select>
    </form>
###jQuery程式碼:######
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(this).children("option:selected").val();
        alert("你选择的城市是: " + selectedCountry);
    });
});
###效果圖如下:################## ###從多選框中選擇選項#########多選框允許使用者選擇多個選項,透過將屬性新增multiple到221f08282418e2996498697df914ce4e標記,可以在選擇框中啟用多個部分###
<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function(){
        var countries = [];
        $.each($(".country option:selected"), function(){            
            countries.push($(this).val());
        });
        alert("你选择的城市有:" + countries.join(", "));
    });
});
</script>
</head>
<body>
    <form>
        <label>选择城市</label>
        <select class="country" multiple="multiple" size="5">
            <option>合肥</option>
            <option>上海</option>
            <option>北京</option>
            <option>南京</option>
            <option>杭州</option>
        </select>
        <button type="button">选择</button>
    </form>
###效果圖:#############

以上是如何使用jQuery在選擇框中取得所選選項的值的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn