Loop through dropdowns with a class to set index to 0

Question

I have a group of DropDownLists with a class of recur and I want to set their index conditionally in a function like this but it isn't working. I'm sure there must be a way of doing this?

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

What isn't working? What's happening instead? What did you expect? Did you get any errors? — kelsny, Sep 21 '22 at 14:06
@caTS there is no error but the value of obj is [object HTMLSelectElement] so I'm not sure if I expected to see that or not — stonypaul, Sep 21 '22 at 14:11
What do you mean by 'set index to 0'? Do you mean set the first option in the list as selected - ie. reset to default state? — Rory McCrossan, Sep 21 '22 at 14:12

score 1 · Answer 1 · edited Sep 25 '22 at 07:59

1

Is this .recur an <option> element within a <select>?

Like this?

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

Why do you need to change the index? are you attempting to re-order items in this dropdown list?

Your code is currently setting an index attribute to 0 for every element. I assume that's not what you're trying to achieve

I'd recommenced making a function for "reordering" them if that's what you intend to do. Rather than doing a multiple things at once in one function.

If you are trying to sort this alphabetically, another stack overflow answer linked here has you covered with the use of 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
  }))
}

If you are intending to set the first element as selected, just do the following:

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

edited Sep 25 '22 at 07:59

Tyler2P

2,324
26
22
31

answered Sep 21 '22 at 14:12

Alex Stringer

36
2

`.recur` is the select, not the option elements. OP is asking how to set the first option as selected, not to sort them. – Rory McCrossan Sep 21 '22 at 14:19
The comments regarding the context of this did not exist before my answer was created – Alex Stringer Sep 21 '22 at 14:22
Yep, that's why I commented here to let you know :) – Rory McCrossan Sep 21 '22 at 14:25
Up vote because this is a good answer based on the (lack) of information in the question. In fact, the question was very misleading because of the use of jQuery .index(). – Yogi Sep 21 '22 at 14:34

score 1 · Answer 2 · edited Sep 21 '22 at 15:55

1

Aha! This works:

obj.selectedIndex = 0;

edited Sep 21 '22 at 15:55

Rory McCrossan

331,213
40
305
339

answered Sep 21 '22 at 14:15

stonypaul

667
1
8
20

score 1 · Answer 3 · answered Sep 21 '22 at 14:16

From the comments under your question it appears that your goal is to set the first option within each select as the chosen value.

To do this you can select the options using :nth-child(1) and set the selected property on them:

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>

Alternatively, assuming the first option has a value="" attribute, as is common practice, you can just set that value on all select elements:

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

up voted, but do you think this is better than OP's own solution using selectIndex? — Yogi, Sep 21 '22 at 14:40
@Rory McCrossan No there isn't a value="" attribute, sorry I should have mentioned that — stonypaul, Sep 21 '22 at 15:31
@Yogi 'better' is entirely subjective. My version is a one-liner. The OP's property access is more concise. My version consistently uses jQuery methods, the OPs mixes native and framework. At the end of the day both work, and so long as you and your dev team can understand it, it's good code. — Rory McCrossan, Sep 21 '22 at 15:54

Loop through dropdowns with a class to set index to 0

3 Answers3