使用jQuery处理选择框值

Question

我有多个动态值的选择框。 如何处理选择框的值，请提出优化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/

谢谢。

Answer 1

http://jsfiddle.net/ysaa4uyc/4/

$('select[name^="alphabet"] option[value='+alphabet+']').attr("selected", "selected");

Answer 2

以您为例，如果您希望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> 

Answer 3

将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());
 });

上面的代码适用于单个/多个值选择。