Javascript – jquery append with dropdown option in disabled=”disabled”

html, javascript, jquery

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

Best Solution

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>");         }     });