html - jQuery:选择元素预选选项失败

Question

在this simple fiddle我测试了通过 jQuery 从 select 元素中选择一个选项，它确实有效，一次......但是如果我想清除预选并再次设置它，多次(第二次使用两个按钮)，它不会改变不再...我在 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 property:

$("#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>