在其他选择“标签”的选项中添加“选定”属性

Question

我有一张有尺寸的“桌子”。 并且要在文档的所有“选择”中将“选择的”属性添加到“选项”。

<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', ' ');
});

但是它仅与文档中的第一个“选择”一起使用时，从所有“选项”中删除“选中的属性”，但仅将其添加到第一个“选择”中的“选项”中。

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);
});

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

 <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> 

---

更新：如果要删除该属性，请设置set属性，并从其同级元素中删除该属性。

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

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

 <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> 

Answer 2

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

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

 $('#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'); }); 

 <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> 

Answer 3

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

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

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