In my normal html drop down menu I am setting the default selected option to disabled state using below code

<select id="sel_bank" name="sel_bak">
  <option disabled="disabled" SELECTED >Select Your product</option>
  <option>Mobile</option>
  <option>laptop</option>
</select>

I have one mor drop down menu where the options are getting populated depends upon first drop down selection.

<select id="sel_state" name="sel_state">
  <option disabled="disabled" SELECTED >Select Your brand</option>
</select>

and using below jquery:

 $(document).ready(function() {
  $("#sel_bank").change(function() {
  var el = $(this) ;
   if(el.val() === "Mobile" ) {
     $("#sel_state").empty().append
     ("<option SELECTED>Select Your product</option>\
       <option>Samsung</option>\
       <option>Nokia</option>");
     }
   else if(el.val() === "laptop"){
     $("#sel_state").empty().append
          ("<option SELECTED>Select Your product</option>\
            <option>HP</option>\
            <option>Dell</option>");       
      }
  });   
});

Here also, I need to set the default selected option Select Your product as disabled similar to first.I have tried to put

("<option disabled="disabled"  SELECTED>Select Your product</option>\
  <option>HP</option>\
  <option>Dell</option>");

But that is not working. How to do it ?

FS FIDDLE SETUP

In my normal html drop down menu I am setting the default selected option to disabled state using below code

<select id="sel_bank" name="sel_bak">
  <option disabled="disabled" SELECTED >Select Your product</option>
  <option>Mobile</option>
  <option>laptop</option>
</select>

I have one mor drop down menu where the options are getting populated depends upon first drop down selection.

<select id="sel_state" name="sel_state">
  <option disabled="disabled" SELECTED >Select Your brand</option>
</select>

and using below jquery:

 $(document).ready(function() {
  $("#sel_bank").change(function() {
  var el = $(this) ;
   if(el.val() === "Mobile" ) {
     $("#sel_state").empty().append
     ("<option SELECTED>Select Your product</option>\
       <option>Samsung</option>\
       <option>Nokia</option>");
     }
   else if(el.val() === "laptop"){
     $("#sel_state").empty().append
          ("<option SELECTED>Select Your product</option>\
            <option>HP</option>\
            <option>Dell</option>");       
      }
  });   
});

Here also, I need to set the default selected option Select Your product as disabled similar to first.I have tried to put

("<option disabled="disabled"  SELECTED>Select Your product</option>\
  <option>HP</option>\
  <option>Dell</option>");

But that is not working. How to do it ?

FS FIDDLE SETUP

• javascript
• jquery
• html

3 Answers 3

JSFIDDLE DEMO

You're emptying and then appending again. But you didn't add disabled option

     $("#sel_bank").change(function () {
         var el = $(this);
         if (el.val() === "Mobile") {
             $("#sel_state").empty().append("<option disabled='disabled' SELECTED>Select Your product</option>\
     <option>Samsung</option>\
<option>Nokia</option>");
         } else if (el.val() === "laptop") {
             $("#sel_state").empty().append

             ("<option disabled='disabled' SELECTED>Select Your product</option>\
     <option>HP</option>\
<option>Dell</option>");

         }
     });

You need to add disable='disabled' for default option and note that use single quotes .

$(document).ready(function() {
 $("#sel_bank").change(function() {
 var el = $(this) ;
 if(el.val() === "Mobile" ) {
    $("#sel_state").empty().append
    ("<option disabled='disabled' SELECTED>Select Your product</option>\
     <option>Samsung</option>\
<option>Nokia</option>");
    }
      else if(el.val() === "laptop" ) {
         $("#sel_state").empty().append

          ("<option disabled='disabled' SELECTED>Select Your product</option>\
     <option>HP</option>\
<option>Dell</option>");

      }
  });


});

FIDDLE Demo

I use this.

$("#sel_state").empty().append($('<option>', {
   disabled: true,
   value: value,
   text: text
}));