.val()返回值是属性而不是<option>标签的内容

Question

我正在为一个由第三方构建和托管的网站添加自己的jquery代码（因此我无法编辑HTML以删除属性等）。 我试图返回下拉框当前选择项的值（例如，此项从100到500，步长为100），HTML：

<select name="ctl00$cpMainBody$OptionCalc$Quantities" onchange="javascript:setTimeout('__doPostBack(\'ctl00$cpMainBody$OptionCalc$Quantities\',\'\')', 0)" id="ctl00_cpMainBody_OptionCalc_Quantities" class="form-control">
  <option selected="selected" value="234">100</option>
  <option value="235">200</option>
  <option value="236">300</option>
  <option value="237">400</option>
  <option value="238">500</option>
</select>

这是我的jQuery代码：

function displayVals() {
  var dropDowns = $( "#ctl00_cpMainBody_OptionCalc_Quantities" ).val();
  $( "#displaying" ).html( "<strong>Value:</strong> " + dropDowns);
}
$(document).on("change", "select", displayVals);
displayVals();

每当我从下拉列表中选择选项时，返回的值是234而不是100，235而不是200等等。

我不知道如何使其返回选项元素的内容而不是值属性的值？

- Gerald Wangley

Answer 1

这是预期的行为--.val()方法用于获取选择项的值。您应该使用：

var dropDowns = $( "#ctl00_cpMainBody_OptionCalc_Quantities option:selected" ).text();

- Martin

---

我想你的意思是$("#ctl00_cpMainBody_OptionCalc_Quantities option:selected").text();。 - Rory McCrossan

Answer 2

这是预期的行为。要获取选项的文本而不是其内部文本，您需要获取所选选项并获取其文本，如下所示：

function displayVals() {
  var dropDowns = $( "#ctl00_cpMainBody_OptionCalc_Quantities option:selected" ).text();
  $( "#displaying" ).html( "<strong>Value:</strong> " + dropDowns);
}

- lucasnadalutti

Answer 3

如果您想获得文本值，可以这样做

$("#ctl00_cpMainBody_OptionCalc_Quantities option:selected").text();

如果您不加上:selected，执行$("#ctl00_cpMainBody_OptionCalc_Quantities").text();，您将得到每个选项的列表，类似于：

100
200
300
400
500

- chiliNUT

Answer 4

$( "#ctl00_cpMainBody_OptionCalc_Quantities option:selected" ).text()

- Seth