jquery附加了禁用的下拉选项=“禁用”

时间:2014-01-10 14:42:18

标签: javascript jquery html

在我的普通html下拉菜单中,我使用以下代码

将默认选中选项设置为禁用状态
<select id="sel_bank" name="sel_bak">
  <option disabled="disabled" SELECTED >Select Your product</option>
  <option>Mobile</option>
  <option>laptop</option>
</select>

我有一个mor下拉菜单,其中填充的选项取决于第一个下拉选择。

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

并使用以下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>");       
      }
  });   
});

在这里,我还需要将默认选定选项Select Your product设置为disabled,类似于first。我试图将

设置为

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

但这不起作用。怎么做?

FS FIDDLE SETUP

2 个答案:

答案 0 :(得分:2)

<强> JSFIDDLE DEMO

您正在清空,然后再次追加。但是您没有添加disabled选项

     $("#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>");

         }
     });

答案 1 :(得分:1)

您需要添加disable='disabled'作为默认选项,并注意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