将“selected”attr添加到不同选择“tag”中的选项

Question

我有一个大小的“桌子”。并希望在文档中的所有“选择”中将attr“selected”添加到“option”。

<select name="Size" id="size_11">
       <option value="37" selected="">37</option>
       <option value="37.5">37.5</option>
       <option value="38">38.5</option>
       <option value="39">39</option>
       <option value="40">40</option>
       <option value="40.5">40.5</option>
       <option value="41">41</option>
       <option value="41.5">41.5</option>
       <option value="42">42</option>
       <option value="43">43</option>
       <option value="43.5">43.5</option>
       <option value="44.5">44.5</option>
       <option value="45">45</option>
       <option value="45.5">45.5</option>
       <option value="46">46</option>
       <option value="46.5">46.5</option>
       <option value="47">47</option>
       <option value="48">48</option>
       <option value="48.5">48.5</option>
</select>

这有效：

$('#modal_sizes tr').click(function() {
  $('option').removeAttr('selected').eq($(this).index()).attr('selected', ' ');
});

但它仅适用于文档中的第一个“选择”，从所有“选项”中删除attr“selected”，但仅在第一个“select”中将其添加到“选项”。

Answer 1

无需删除属性，因为未添加multiple属性更新所选属性将自动更新其他元素selected属性。因此，请使用prop()方法更新基于索引选择的option的属性。

$('#modal_sizes tr').click(function() {
  $('option').eq($(this).index()).prop('selected',true);
  // or $('option:eq(' + $(this).index() + ')').prop('selected', true);
});

＆＃13;

＆＃13;

$('#modal_sizes tr').click(function() {
  $('option').eq($(this).index()).prop('selected', true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="modal_sizes">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
</table>

<select name="Size" id="size_11">
  <option value="37" selected="">37</option>
  <option value="37.5">37.5</option>
  <option value="38">38.5</option>
  <option value="39">39</option>
</select>

＆＃13;

＆＃13;

＆＃13;

UPDATE：如果要删除属性set属性，请从其兄弟元素中删除该属性。

 $('#modal_sizes tr').click(function() { 
   $('option').eq($(this).index()).attr('selected', ' ').siblings().removeAttr('selected');
 });

＆＃13;

＆＃13;

$('#modal_sizes tr').click(function() {
  $('option').eq($(this).index()).attr('selected', '  ').siblings().removeAttr('selected');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="modal_sizes">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
  </tr>
</table>

<select name="Size" id="size_11">
  <option value="37" selected="">37</option>
  <option value="37.5">37.5</option>
  <option value="38">38.5</option>
  <option value="39">39</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在选择器中使用option:nth-child

$('#modal_sizes tr').click(function() {
  $('select > option').removeAttr('selected');
  $('select > option:nth-child('+($(this).index()+1)+')').prop('selected', 'selected');
});

＆＃13;

＆＃13;

$('#modal_sizes tr').click(function() {
  console.log($('select > option:nth-child('+($(this).index()+1)+')'));
  $('select > option').removeAttr('selected');
  $('select > option:nth-child('+($(this).index()+1)+')').prop('selected', 'selected');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="modal_sizes">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
</table>

<select name="Size">
  <option value="37" selected="">37</option>
  <option value="37.5">37.5</option>
  <option value="38">38.5</option>
  <option value="39">39</option>
</select>
<select name="Size">
  <option value="37" selected="">37</option>
  <option value="37.5">37.5</option>
  <option value="38">38.5</option>
  <option value="39">39</option>
</select>
<select name="Size">
  <option value="37" selected="">37</option>
  <option value="37.5">37.5</option>
  <option value="38">38.5</option>
  <option value="39">39</option>
</select>
<select name="Size">
  <option value="37" selected="">37</option>
  <option value="37.5">37.5</option>
  <option value="38">38.5</option>
  <option value="39">39</option>
</select>
<select name="Size">
  <option value="37" selected="">37</option>
  <option value="37.5">37.5</option>
  <option value="38">38.5</option>
  <option value="39">39</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我认为这里的部分问题是您正在选择所有选项。不仅仅是您特定行中的选项。除了使用prop而不是更改attr之外，你应该这样做。

$('#modal_sizes tr').click(function() {
  $('option', this).prop('selected', false).eq($(this).index()).prop('selected', true);
});

范围选择为$('option', this)