如何關閉禁用下拉菜單打開？

Question

  <div id=ControlId>
       <select id="' +ControlId + '_text" value="Select Options" style="max-width:150px;background:White;Width:150px"> <option selected>Select Options</option></select>
  </div>
  <div id=ControlId + "_child"  style="display: none" > 
      <table>
         <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Bike" /> option 1
            </td>
         </tr>
         <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="Car" /> option 2
            </td>
         </tr>
         <tr>
            <td valign="top" style="width: 165px" ><input type="checkbox" name="vehicle" value="dog" /> option 3
            </td>
         </tr>
    </table>
   </div>

我已經為以下多項選擇創建了下拉列表，如何禁用默認下拉列表

這是我在JQuery中的實際事件：

$("#" + ControlId).click(function () {
       $("#" + ControlId + "_child").fadeIn("slow");
       $("#" + ControlId + "_child").toggle();
});

如何禁用默認下拉菜單打開？

Answer 1

我不確定您是否要 禁用該下拉菜單 。 如果是這樣，請嘗試使用以下代碼將其禁用。

 
 
 
  
  $("#" + ControlId + "_text").attr("disabled", true);
 
  

還要檢查您的 HTML代碼，必須對其進行清理。

EDIT1：如果您使用的是jQuery 1.6+，請嘗試使用prop；

 
 
 
  
  $("#" + ControlId + "_text").prop("disabled", true);
 
  

編輯2：單擊下拉菜單時隱藏到選項。

 
 
 
  
  $("#" + ControlId).click(function () { $("#" + ControlId + " options").hide(); });
 
  

EDIT3：您正在嘗試為SELECT標簽添加一個占位符 ，當前不可用。 刪除select的內聯樣式，然后將以下CSS添加到代碼中。

 select { max-width:150px; background:White; height: 25px; } /* Hidden placeholder */ select option[disabled]:first-child { display: none; } 

在Firefox中查看此JSFiddle 。