[英]Handle Select box value with Jquery
我有多個動態值的選擇框。 如何處理選擇框的值,請提出優化Jquery的方法。
HTML:
<select name="alphabet">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
jQuery:
var alphabet = "B";
if (alphabet == "A") {
$('select[name^="alphabet"] option[value="A"]').attr("selected", "selected");
} else if (alphabet == "B") {
$('select[name^="alphabet"] option[value="B"]').attr("selected", "selected");
} else if (alphabet == "C") {
$('select[name^="alphabet"] option[value="C"]').attr("selected", "selected");
}
http://jsfiddle.net/ysaa4uyc/2/
謝謝。
http://jsfiddle.net/ysaa4uyc/4/
$('select[name^="alphabet"] option[value='+alphabet+']').attr("selected", "selected");
以您為例,如果您希望jQuery更具模塊化,以允許任意數量的值,則可以基於變量進行操作。
$(document).ready(function() { var letters = 'ABCDE'; var random = Math.round(Math.random() * 5) + 1; var letter = letters.substring(random - 1, random); $('select[name^="alphabet"] option[value="' + letter + '"]').attr("selected", "selected"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="alphabet"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select>
主線是:
$('select[name^="alphabet"] option[value="' + letter + '"]').attr("selected", "selected");
這將根據您的變量進行動態輸入,或者在我的示例中根據變量letter
的輸出進行動態輸入。
如果要查找當前選定的值,可以查找select change()
。
$(document).ready(function() { $('select[name^="alphabet"]').change(function() { var value = $(this).find(':selected').val(); $('.output').text(value); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="alphabet"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> <div>Value: <span class="output"></span> </div>
將ID添加到選擇框(具有name屬性不是必需的)
<select id="alphabet" name="alphabet">
<option value=""></option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
如果希望選擇多個值,請在選擇框中使用“ multiple”屬性
<select id="alphabet" multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
使用選擇框的ID,可以將所選值用作
$('select[id=alphabet]').val();
您可以使用選擇框上的任何事件來測試所選值,例如
$('select[id=alphabet]').change(function() {
alert($('select[id=alphabet]').val());
});
上面的代碼適用於單個/多個值選擇。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.