.val() 返回值 ATTRIBUTE 不是 <option> 的内容

Question

我目前正在将自己的 jquery 代码添加到由第三方构建和托管的网站（因此我无法编辑 HTML 以删除属性等）。我正在尝试 return 下拉框当前 selected 项目的值（例如这个从 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();

每当我 select 从下拉列表中选择一个选项时，returned 值是 234 而不是 100、235 而不是 200，等等。

我不知道如何获得它 return option 元素的内容而不是 value 属性的值？

Answer 1

这是预期的行为 -- select 的 .val() 是 selected 项的值。你应该使用

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

Answer 2

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

Answer 3

这是预期的行为。要改为检索它们的内部文本，您需要获取所选选项并获取其文本，如下所示：

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

Answer 4

如果你想获取文本值，你可以这样做

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

如果您在没有 :selected 的情况下执行 $("#ctl00_cpMainBody_OptionCalc_Quantities").text();，您将获得每个选项的列表，例如

.val() 返回值 ATTRIBUTE 不是 <option> 的内容

.val() returning value ATTRIBUTE not content of <option>

jquery

html

html-select