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>

Answer 2

您可以使用jquery这样获得选定的选项文本，并且可以使用jquery的val（）函数代替text（）获得选定的值

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){


    $("#box1").on('change', function(){
            var conceptName = $('#box1').find(":selected").text();
            var values = $('#box1').find(":selected").val(); // for get values
            alert(conceptName)
});

});
</script>
</head>
<body>
<select id="box1" name="selectArea">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>
</body>
</html>

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

2 个答案: