CODEWITHSUNDEEP
javascriptphpjquery
Meteo Litoral
Meteo Litoral

Reputation: 43

Select first option as default in dropddown menu

I have tide tables from several ports and I can choose the port from a dropdown menu that has a first line "select location". When I change location, it selects a div and only shows the tide table inside that div, ignoring the other divs. This was done this way, because it was the only way to refresh data by just refreshing a div, instead of refreshing the whole webpage when a new location is selected. It is working fine, but I would like to open the webpage, already displaying the name of location A and displaying the tide table for location A, insted of just opening with the "select location" option and not showing anything else.

This is the current situation

 <div>
      <select>
        <option>Select Location</option>
        <option value="A">Location A</option>
        <option value="B">Location B</option>
        <option value="C">Location C</option>
    </select>
</div>

 <div class="box A">
    <?php 
      // tide table for location A 
    ?>
 </div>

<div class="box B">
    <?php 
      // tide table for location B 
    ?>
 </div>

<div class="box C">
    <?php 
      // tide table for location C 
    ?>
 </div>

<script>
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>

How can I remove the "select location" option and have the dropdown menu show "Location A" and the script display the content of div class="box A" when the webpage opens?

Current default display Desired default display

Upvotes: 1

Views: 85

Answers (2)

charlietfl
charlietfl

Reputation: 171669

You can set the initial value of the <select> using val() and trigger the change event after setting it which will in turn run the change handler.

I've also simplified the change handler logic as you can use the value of the select itself without needing to loop over the <option> elements

$('select#location').change(function() {
  $('.box').hide().filter('.' + this.value).show();
  // set the value and trigger change on page load
}).val('A').change()
.box {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <select id="location">
    <option value="">Select Location</option>
    <option value="A">Location A</option>
    <option value="B">Location B</option>
    <option value="C">Location C</option>
  </select>
</div>

<div class="box A">Box A</div>
<div class="box B">Box B</div>
<div class="box C">Box C</div>

Upvotes: 2

Scott Marcus
Scott Marcus

Reputation: 65796

If you are going to pre-select an option from the list, it seems to run contrary (from a UX perspective) to having the "Select Location" option in the first place.

Having said that:

Add the selected attribute to the option that should be selected by default and then manually call the function that does the updates. Also note that an option that is not supposed to be considered a valid option, such as "Select Location" should explicitly have its value attribute set to "", otherwise its value implicitly becomes the text content of the option.

See JavaScript comments inline below.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
      <select>
        <option value="">Select Location</option>
        <option value="A" selected>Location A</option>
        <option value="B">Location B</option>
        <option value="C">Location C</option>
    </select>
</div>
 <div class="A">
    <?php 
      // tide table for location A 
    ?>
 </div>

<div class="B">
    <?php 
      // tide table for location B 
    ?>
 </div>

<div class="C">
    <?php 
      // tide table for location C 
    ?>
 </div>
<script>
$(document).ready(function(){
 // Instead of an anonymous function, use a
 // function declaration so the function can
 // be called explicitly when needed.
 function update(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
 }
 $("select").change(update).change();
 update(); // Update as soon as the page loads.
});
</script>

Upvotes: 2

Related Questions