javascript - 获取没有选定属性的选定选项

Question

如果这是我的示例代码:

<select id="box1" name="selectArea">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

这是我的 jQuery 代码:

var x = document.getElementsByName("selectArea")[0];
var selected = x.options[x.selectedIndex].value;

这个值总是错误的，因为选项中没有“selected”属性。就我而言，我使用的是新表单，用户可以选择一个值。当他们选择一个选项时，“selected”属性不会自动附加到该选项。

如果没有实际选择的属性，我将如何选择被选中的选项？这可能吗？当我在下拉列表中选择另一个选项时，x.selectedIndex 的值没有改变。

Answer 1

在 jQuery 中，您可以简单地使用 $("[name='selectArea']").val()

获取所选选项的值

var option = $("[name='selectArea']").val();

console.log(option);

$("[name='selectArea']").on('change', function(){
  var option = $("[name='selectArea']").val();
  console.log(option);
});

$('button').on('click', function(){
  alert($("[name='selectArea'] option:selected").text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="box1" name="selectArea">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>
<button>Click Me</button>