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

Change the text of the option with empty value of a specific select with jQuery

Suppose a page with two hierarchical select boxes. One holds the regions, and according to the selected region, a second select appears with the areas of that region.

Unfortunately the system that generates them, sets the same placeholder for both, so both selects’ default value (value="") is "Select Region".

So, I want to change on-the-fly the default value of the second one to "Select Area".

You can distinguish the second selects by their data-level attribute.

(function($) {
  $(document).ready(function() {
    //alert($('select.listdom-location[data-level="2"]').find('option:empty').text());
  });
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lsd-search-filter lsd-col-10">
  <label for="lsd_search_10574_listdom-location">Regions</label>
  <div class="lsd-hierarchical-dropdowns" id="lsd_search_10574_listdom-location_wrapper" data-for="listdom-location" data-id="lsd_search_10574_listdom-location" data-max-levels="2" data-name="sf-listdom-location" data-hide-empty="0">
    <select class="listdom-location" name="sf-listdom-location" id="lsd_search_10574_listdom-location_1" placeholder="Select Region" data-level="1">
      <option value="">Select Region</option>
      <option class="lsd-option lsd-parent-0" value="289">Region 1</option>
      <option class="lsd-option lsd-parent-0" value="391">Region 2</option>
      <option class="lsd-option lsd-parent-0" value="290">Region 3</option>
    </select>
    <select class="listdom-location" name="" id="lsd_search_10574_listdom-location_2" placeholder="Select Region" data-level="2">
      <option value="">Select Region</option>
      <option class="lsd-option lsd-parent-289" value="291">Area 1</option>
      <option class="lsd-option lsd-parent-289" value="292">Area 2</option>
    </select>
  </div>
</div>

Can you help me change with jQuery on page load the default option to "Select Area" please?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok, based @Geshode's answer above, I was able to figure out the correct code to use!

    (function($) {
  $(document).ready(function() {
    $('select.listdom-location[data-level="2"] option[value=""]').text("Select Area")
  });
})(jQuery);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lsd-search-filter lsd-col-10">
  <label for="lsd_search_10574_listdom-location">Regions</label>
  <div class="lsd-hierarchical-dropdowns" id="lsd_search_10574_listdom-location_wrapper" data-for="listdom-location" data-id="lsd_search_10574_listdom-location" data-max-levels="2" data-name="sf-listdom-location" data-hide-empty="0">
    <select class="listdom-location" name="sf-listdom-location" id="lsd_search_10574_listdom-location_1" placeholder="Select Region" data-level="1">
      <option value="">Select Region</option>
      <option class="lsd-option lsd-parent-0" value="289">Region 1</option>
      <option class="lsd-option lsd-parent-0" value="391">Region 2</option>
      <option class="lsd-option lsd-parent-0" value="290">Region 3</option>
    </select>
    <select class="listdom-location" name="" id="lsd_search_10574_listdom-location_2" placeholder="Select Region" data-level="2">
      <option value="">Select Region</option>
      <option class="lsd-option lsd-parent-289" value="291">Area 1</option>
      <option class="lsd-option lsd-parent-289" value="292">Area 2</option>
    </select>
  </div>
</div>

    Thanks a lot for your help!


  2. 0

    There are multiple possible ways to do that.

    One possibility:

    $('#lsd_search_10574_listdom-location_2 option[value=""]').text("Select Area")
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lsd-search-filter lsd-col-10">
  <label for="lsd_search_10574_listdom-location">Regions</label>
  <div class="lsd-hierarchical-dropdowns" id="lsd_search_10574_listdom-location_wrapper" data-for="listdom-location" data-id="lsd_search_10574_listdom-location" data-max-levels="2" data-name="sf-listdom-location" data-hide-empty="0">
    <select class="listdom-location" name="sf-listdom-location" id="lsd_search_10574_listdom-location_1" placeholder="Select Region" data-level="1">
      <option value="">Select Region</option>
      <option class="lsd-option lsd-parent-0" value="289">Region 1</option>
      <option class="lsd-option lsd-parent-0" value="391">Region 2</option>
      <option class="lsd-option lsd-parent-0" value="290">Region 3</option>
    </select>
    <select class="listdom-location" name="" id="lsd_search_10574_listdom-location_2" placeholder="Select Region" data-level="2">
      <option value="">Select Region</option>
      <option class="lsd-option lsd-parent-289" value="291">Area 1</option>
      <option class="lsd-option lsd-parent-289" value="292">Area 2</option>
    </select>
  </div>
</div>

    You select the default option, which has an empty string as its value, of the second select, which has the id lsd_search_10574_listdom-location_2 and then you change its text to Select Area.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search