'jquery append with dropdown option in disabled="disabled"

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

javascriptjqueryhtml


Solution 1:[1]

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

Solution 2:[2]

I use this.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Raja Jaganathan
Solution 2 Burak A?k?n

Related Questions