jQuery: select 元素前 select 选项失败

Question

在 this simple fiddle 中，我通过 jQuery 测试了 select 来自 select 元素的一个选项，它确实有效，一次...但是如果我想清除preselection 并再次设置它，多次（第二次使用两个按钮），它不再改变......我在 firefox 和 chrome.

中尝试过

这是为什么？还没找到解决方法:(

HTML:

<select>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
<button id="select2">preselect 2nd</button>
<button id="selectNone">preselect none</button>

Javascript:

$("#select2").click(function() {
    $("select option:nth-of-type(2)").attr("selected", true);
});

$("#selectNone").click(function() {
    $("option").attr("selected", false);
});

提前致谢！塞韦林

Answer 1

设置 selected 属性不起作用，因为 selected 属性不是选项的当前选定状态；这是选项的默认选择状态。

只需使用val，在第一种情况下使用options伪数组：

$("#select2").click(function() {
  var select = $("select");
  select.val(select[0].options[2].value);
});

$("#selectNone").click(function() {
  $("select").val(null);
});

$("#select2").click(function() {
  var select = $("select");
  select.val(select[0].options[2].value);
});

$("#selectNone").click(function() {
  $("select").val(null);
});

<select>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
<button id="select2">preselect 2nd</button>
<button id="selectNone">preselect none</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

或者，在选项上使用 selected 属性：

$("#select2").click(function() {
  $("select option:nth-of-type(2)").prop("selected", true);
});

$("#selectNone").click(function() {
  $("select").val(null);
});

$("#select2").click(function() {
  $("select option:nth-of-type(2)").prop("selected", true);
});

$("#selectNone").click(function() {
  $("select").val(null);
});

<select>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
<button id="select2">preselect 2nd</button>
<button id="selectNone">preselect none</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

我稍微更改了 fiddle 中的代码。

var select = $("select");
// for instance set an ID for more than one selectboxes
var option = select.find("option");

$("#select2").click(function() {
  option.eq(1).attr("selected",true);
  select.val(option.eq(1).val()).change();
});

$("#selectNone").click(function() {
  option.attr("selected",false);
  select.change();
});

这里是fiddlehttps://jsfiddle.net/63wm1r01/23/

最重要的是select.change();部分。它在其他项目中对我来说非常好。

希望对您有所帮助。

jQuery: select 元素前 select 选项失败

jQuery: select element preselect option fail

jquery

html

select

option