Question

我有以下选择：

<select class="my-select">
  <option value="-1">All</option>
  <option value="7">Red</option>
  <option value="8">Green</option>
  <option value="9">Blue</option>
</select>

然后我运行了一个函数来查看select中的所选选项：

function getSelectedOption () {

  var selection = $('.my-select').val();

  console.log(selection);

}

这就是奇怪的地方，我可以在“红色”，“绿色”等情况下运行该功能。和＆＃39;蓝＆＃39;被选中，它总是返回正确的值。但是当我选择全部＆＃39;时，会返回正确的值（-1），但是当我返回并选择“红色”时，或之后的任何其他选项，返回值始终为（-1）。建议＆＃39;所有＆＃39;被选中。什么时候不是。我还检查了DOM以查看，并且在红色＆＃39; DOM被选中，DOM看起来像：

<select class="my-select">
  <option value="-1">All</option>
  <option value="7" selected="selected">Red</option>
  <option value="8">Green</option>
  <option value="9">Blue</option>
</select>

但$('.my-select').val()正在给我错误的值。

Answer 1

试试这个：

$('.my-select').find('option:selected').val()

它不应该是<option val="7"></option>，而应该是这样的：

 <option value="7"></option>

Answer 2

似乎可以正常工作，您使用的浏览器是什么？

＆＃13;

var $select = $('select');

$select.on('change', function (event) {
  console.log($(event.target).val());
});

$select.trigger('change');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="my-select">
  <option value="-1">All</option>
  <option value="7">Red</option>
  <option value="8" selected>Green</option>
  <option value="9">Blue</option>
</select>

＆＃13;

Answer 3

您在选项val中使用了错误的属性，正确的属性为value，用于分配不同的值，然后是文本/标签

＆＃13;

function getSelectedOption () {

  var selection = $('.my-select').val();

  console.log(selection);

}

$(".my-select").change(getSelectedOption);

getSelectedOption();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="my-select">
  <option value="-1">All</option>
  <option value="7" selected="selected" >Red</option>
  <option value="8">Green</option>
  <option value="9">Blue</option>
</select>

＆＃13;

当在select元素中查找所选项时，JQuery总是返回第一个选项

3 个答案: