Question

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

我稍微改变了你的代码。

td:first-of-type, td:last-of-type {
    /* styles */
}

这是小提琴Compressed Emoji

最重要的是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(); });部分。它在其他项目中对我很有用。

希望这有帮助。

jQuery：select元素preselect选项失败

2 个答案: