Question

我想更改所选的＆lt;选项＆gt;对于多个＆lt;选择＆gt;按索引。

我只知道一个＆lt;选择＆gt;有：

$('select[name="test"] option').eq(val).prop('selected', true);

现在只有在有一个且只有一个＆lt;选择＆gt;名称=“测试”。有多个我把我的代码改为：

$('select[name="test"]').each(function (index, value) {
  $(value).select('options').eq(val).prop('selected', true));
});

但这不起作用，有什么帮助吗？

Answer 1

将select更改为find，例如：

$('select[name="test"]').each(function (index, value) {
  $(value).find('options').eq(val).prop('selected', true));
});

但除非在某处定义val，否则这将无效......是吗？而val将是<option>的索引，而不是它的值。例如，如果val = 0，将选择第一个选项，如果val=1，则选择第二个选项，等等（它是从零开始的索引）。

Answer 2

鉴于<option>是您希望选择的// selecting all <option> elements which are the relevant nth-child // of their parent <select> elements with the name=test: $('select[name=test] option:nth-child(' + (val + 1) + ')') // setting the selected property to true of all <option> elements // matching the given selector: .prop('selected', true);元素的索引，您只需使用：

$('#demo').on('change', function (e) {
  var val = parseInt(this.value, 10);
  $('select[name=test] option:nth-child(' + (val + 1) + ')').prop('selected', true);
});

input, select {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Enter the <em>index</em> of the <code>&lt;option&gt;</code> you wish to select:
  <input type="number" min="0" max="3" value="0" step="1" id="demo" />
</label>

<select name="test">
  <option>Index: 0</option>
  <option>Index: 1</option>
  <option>Index: 2</option>
  <option>Index: 3</option>
</select>

<select name="test">
  <option>Index: 0</option>
  <option>Index: 1</option>
  <option>Index: 2</option>
  <option>Index: 3</option>
</select>

<select name="test">
  <option>Index: 0</option>
  <option>Index: 1</option>
  <option>Index: 2</option>
  <option>Index: 3</option>
</select>

(val + 1)

:nth-child()的原因是因为JavaScript是基于零的，而使用<option>的CSS选择器是基于一的。但是，如果您的<optgroup>元素包含在$('#demo').on('change', function(e) { var val = parseInt(this.value, 10); $('select[name=test] option:nth-child(' + (val + 1) + ')').prop('selected', true); });个父元素中，则可能存在问题：

input,
select {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Enter the <em>index</em> of the <code>&lt;option&gt;</code> you wish to select:
  <input type="number" min="0" max="7" value="0" step="1" id="demo" />
</label>

<select name="test">
  <optgroup label="first group">
    <option>nth-child: 1, option element: 1</option>
    <option>nth-child: 2, option element: 2</option>
    <option>nth-child: 3, option element: 3</option>
    <option>nth-child: 4, option element: 4</option>
  </optgroup>
  <optgroup label="second group">
    <option>nth-child: 1, option element: 5</option>
    <option>nth-child: 2, option element: 6</option>
    <option>nth-child: 3, option element: 7</option>
    <option>nth-child: 4, option element: 8</option>
  </optgroup>
</select>

<select name="test">
  <optgroup label="first group">
    <option>nth-child: 1, option element: 9</option>
    <option>nth-child: 2, option element: 10</option>
    <option>nth-child: 3, option element: 11</option>
    <option>nth-child: 4, option element: 12</option>
  </optgroup>
  <optgroup label="second group">
    <option>nth-child: 1, option element: 13</option>
    <option>nth-child: 2, option element: 14</option>
    <option>nth-child: 3, option element: 15</option>
    <option>nth-child: 4, option element: 16</option>
  </optgroup>
</select>

prop()

这是因为<option>方法（就像大多数可以作用于多个元素/节点的jQuery方法一样）在内部循环链接它的集合的内容，在上图中有两个<optgroup>元素 - 每个:nth-child()中的一个元素 - 与selected选择器匹配，并且在循环中，匹配选择器的最后一个元素被赋予:nth-child()属性。另外，因为我们使用<option>来选择元素，所以无法从第二个<optgroup>明确选择5，因为我们根据内部元素的索引进行选择它的父级，因此选择索引<option>的元素将不匹配任何元素，因为每个<optgroup>中只有四个each()个元素。

在这种情况下，each()是必需的，或者至少使用$('#demo').on('change', function(e) { var val = parseInt(this.value, 10); // selecting the <select> element with the name of 'test', // iterating over each of them: $('select[name=test]').each(function() { // using plain JavaScript at this point, for simplicity. // this.options is a HTMLOptionsCollection of all <option> // elements contained within the <select> ('this'), here // using array-notation to access the required <option> // from that HTMLOptionsCollection, and setting its // selected property to true: this.options[val].selected = true; }); });方法最简单：

$('#demo').on('change', function(e) {
  var val = parseInt(this.value, 10);
  $('select[name=test]').each(function() {
    this.options[val].selected = true;
  });
});

input,
select {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Enter the <em>index</em> of the <code>&lt;option&gt;</code> you wish to select:
  <input type="number" min="0" max="7" value="0" step="1" id="demo" />
</label>

<select name="test">
  <optgroup label="first group">
    <option>nth-child: 1, option element: 1</option>
    <option>nth-child: 2, option element: 2</option>
    <option>nth-child: 3, option element: 3</option>
    <option>nth-child: 4, option element: 4</option>
  </optgroup>
  <optgroup label="second group">
    <option>nth-child: 1, option element: 5</option>
    <option>nth-child: 2, option element: 6</option>
    <option>nth-child: 3, option element: 7</option>
    <option>nth-child: 4, option element: 8</option>
  </optgroup>
</select>

<select name="test">
  <optgroup label="first group">
    <option>nth-child: 1, option element: 9</option>
    <option>nth-child: 2, option element: 10</option>
    <option>nth-child: 3, option element: 11</option>
    <option>nth-child: 4, option element: 12</option>
  </optgroup>
  <optgroup label="second group">
    <option>nth-child: 1, option element: 13</option>
    <option>nth-child: 2, option element: 14</option>
    <option>nth-child: 3, option element: 15</option>
    <option>nth-child: 4, option element: 16</option>
  </optgroup>
</select>

{{1}}

参考文献：

CSS：
- :nth-child()。
JavaScript的：
- HTMLSelectElement。
- HTMLOptionsCollection。
- parseInt()。
jQuery的：
- each()。
- on()。
- prop()。

从多个选择中更改所选选项

2 个答案: