CODEWITHSUNDEEP
javascriptjqueryhtml
John Carlo Velasquez
John Carlo Velasquez

Reputation: 159

Basic html on selecting options

How will the option 1 "1 - Unit/servings" will appear on the html template? i already changed the hidden value to 1 but it shows the default value "Select One" option. i know it is a basic question and i know it is correct. Tnx

<select class="form-control" id="H_MEALS_SC" >
  <option value=''>Select One</option>
  <option value="1" > 1 - Unit/servings</option>
  <option value="2" > 2 - Sachet</option>
  <option value="3" > 3 - Pack</option>
</select>
     <input type="hidden" name="H_MEALS_SC" id="H_MEALS_SC" value="1" />

Upvotes: 0

Views: 53

Answers (3)

Nitheesh
Nitheesh

Reputation: 20006

Set value with jQuery.

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#H_MEALS_SC").val('1');
            });
            
        </script>
    </head>
<body>
    <select class="form-control" id="H_MEALS_SC">
        <option value=''>Select One</option>
        <option value="1"> 1 - Unit/servings</option>
        <option value="2"> 2 - Sachet</option>
        <option value="3"> 3 - Pack</option>
    </select>
    <input type="hidden" name="H_MEALS_SC" id="H_MEALS_SC_1" value="1" />
</body>

</html>

Upvotes: 1

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

You can add an id attribute to the first option, and add the selected attribute to that element with JQuery or JS.

JQuery:

$(document).ready(function() {
    $('#default-val').prop('selected', true);
});

Pure JS:

var d = document.getElementById('default-val');
d.setAttribute('selected', 'selected');
<select class="form-control" id="H_MEALS_SC" >
  <option value=''>Select One</option>
  <option value="1" id="default-val" > 1 - Unit/servings</option>
  <option value="2" > 2 - Sachet</option>
  <option value="3" > 3 - Pack</option>
</select>
     <input type="hidden" name="H_MEALS_SC" id="H_MEALS_SC" value="1" />

Upvotes: 1

user4973845
user4973845

Reputation: 11

Just add "selected" keyword to the option that you want to be selected by default "Selected keyword"

Upvotes: 1

Related Questions