Loop through dropdowns with a class to set index to 0

stonypaul 0
Viewed 38

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);
          }
        }
asp.net jquery javascript
3 Answers

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);
Alex Stringer0

Aha! This works:

obj.selectedIndex = 0;
stonypaul0

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('');
Rory McCrossan0
Related