jQuery获取Select选择的Text和Value(详细汇总)

下面我将为您详细讲解“jQuery获取Select选择的Text和Value(详细汇总)”的攻略。

背景介绍

在网页开发过程中，我们经常需要获取下拉框（Select）选择的值，这时就需要用到jQuery获取Select选择的Text和Value的方法。

获取Select选择的Text

要获取Select选择的Text，可以使用 .text() 方法，该方法获取Select所有选中项的文本内容，然后通过遍历选项来获取单个选项的文本内容。

下面给出一个示例代码：

<select id="select1">
  <option value="volvo">Volvo XC60</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <<option value="audi">Audi A6</option>
</select>

<p id="demo"></p>

<script>
$("#select1").change(function(){
  var str = "";
  $("#select1 option:selected").each(function(){
    str += $(this).text() + " ";
  });
  $("#demo").text(str);
}).change();
</script>

在上述代码中，函数 .each() 遍历选项，函数 .text() 获取选项的文本内容，函数 #demo.text() 将获取的文本内容填充到指定的文本区域中。

获取Select选择的Value

要获取Select选择的Value，可以使用 .val() 方法。

下面给出一个示例代码：

<select id="select2">
  <option value="volvo">Volvo XC60</option>
  <option value="saab">Saab 95</option>
  <option value="mercedes">Mercedes SLK</option>
  <option value="audi">Audi A6</option>
</select>

<p id="demo2"></p>

<script>
$("#select2").change(function(){
  var str = "";
  $("#select2 option:selected").each(function(){
    str += $(this).val() + " ";
  });
  $("#demo2").text(str);
}).change();
</script>

在上述代码中，函数 .each() 遍历选项，函数 .val() 获取选项的值，函数 #demo2.text() 将获取的值填充到指定的文本区域中。

至此，"jQuery获取Select选择的Text和Value(详细汇总)"攻略的讲解就结束了。希望对您有所帮助。