Question 36557 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Loop through dropdowns with a class to set index to 0 – Jquery

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

3

Answers


  1. Chosen as BEST ANSWER
    0

    Aha! This works:

    obj.selectedIndex = 0;

  2. 0

    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);
    Login or Signup to reply.
  3. 0

    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('');
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search