使用类循环下拉列表以将索引设置为 0答案

【问题标题】：Loop through dropdowns with a class to set index to 0使用类循环下拉列表以将索引设置为 0
【发布时间】：2022-09-25 15:59:20
【问题描述】：

我有一组带有 recur 类的 DropDownLists，我想在这样的函数中有条件地设置它们的索引，但它不起作用。我确定一定有办法做到这一点？

        function DisableFields(disable) {
          if (disable) {
              $(\'.recur\').prop(\'disabled\', true);
              $(\'.recur\').each(function (index, obj) {
                  obj.index(0);
              });
          } else {
              $(\'.recur\').prop(\'disabled\', false);
          }
        }

什么不工作？发生了什么？你期待什么？你有没有得到任何错误？
@caTS 没有错误，但 obj 的值是 [object HTMLSelectElement] 所以我不确定我是否希望看到
“将索引设置为 0”是什么意思？您的意思是将列表中的第一个选项设置为选中 - 即。重置为默认状态？
@RoryMcCrossan 是的

标签： javascript jquery asp.net

【解决方案1】：

从您的问题下的 cmets 看来，您的目标是将每个 select 中的第一个 option 设置为所选值。

为此，您可以使用 :nth-child(1) 选择选项并在其上设置 selected 属性：

function DisableFields(disable) {
  $('.recur').prop('disabled', disable);
  disable && $('.recur option:nth-child(1)').prop('selected', true);
}

$('button').on('click', () => DisableFields(true));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<select class="recur">
  <option>Foo</option>
  <option>Bar</option>
  <option>Fizz</option>
  <option>Buzz</option>
</select>
<select class="recur">
  <option>Foo</option>
  <option>Bar</option>
  <option>Fizz</option>
  <option>Buzz</option>
</select>
<select class="recur">
  <option>Foo</option>
  <option>Bar</option>
  <option>Fizz</option>
  <option>Buzz</option>
</select>
<button>Disable</button>

或者，假设第一个选项具有 value="" 属性，按照惯例，您可以在所有 select 元素上设置该值：

$('.recur').val('');

【讨论】：

投了赞成票，但你认为这比 ONE 自己使用 selectedIndex 的解决方案更好吗？
@Rory McCrossan 不，没有 value="" 属性，抱歉我应该提到
@Yogi“更好”完全是主观的。我的版本是单行的。 OP 的属性访问更加简洁。我的版本始终使用 jQuery 方法，OP 混合了原生和框架。归根结底，两者都有效，只要您和您的开发团队能够理解它，它就是好代码。

【解决方案2】：

啊哈！这有效：

obj.selectedIndex = 0;

【讨论】：

【解决方案3】：

这个.recur 是<select> 中的<option> 元素吗？

像这样？

<select name="cars" id="cars">
  <option class="recur" value="volvo">Volvo</option>
  <option class="recur" value="saab">Saab</option>
  <option class="recur" value="mercedes">Mercedes</option>
  <option class="recur" value="audi">Audi</option>
</select>

为什么需要更改索引？您是否尝试在此下拉列表中重新排序项目？

您的代码当前将每个元素的 index 属性设置为 0。我认为这不是你想要达到的目标

如果您打算这样做，我会重新开始制作“重新排序”它们的功能。而不是在一个功能中一次做多项事情。

如果您尝试按字母顺序排序，此处链接的另一个堆栈溢出答案让您了解了 jQuery 的使用

https://stackoverflow.com/a/667198/20053031

const SortDropdownList = () => {
  $("#cars").html($("option").sort(function (a, b) {
    return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
  }))
}

如果您打算将第一个元素设置为选中，只需执行以下操作：

$('#cars option').first().attr('selected', true);

【讨论】：

.recur 是选择元素，而不是选项元素。 OP 询问如何将第一个选项设置为选中，而不是对它们进行排序。
在创建我的答案之前，有关此上下文的 cmets 不存在
是的，这就是为什么我在这里评论让你知道:)
投赞成票，因为这是基于问题中（缺乏）信息的一个很好的答案。事实上，由于使用了 jQuery .index()，这个问题非常具有误导性。