<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>
I have created dropdownlist for multiple selection as following, how to disable default dropdown opening
this is my actural event in JQuery :
$("#" + ControlId).click(function () {
$("#" + ControlId + "_child").fadeIn("slow");
$("#" + ControlId + "_child").toggle();
});
How to disable default dropdown opening?
I'm not sure whether you're trying to
disable the dropdown .
If so try using the below code to disable it.
$("#" + ControlId + "_text").attr("disabled", true);
Also check your
HTML
code, it has to be cleaned up.
EDIT1: If you're using jQuery 1.6+, then try using prop;
$("#" + ControlId + "_text").prop("disabled", true);
EDIT2: Hide to option when dropdown is clicked.
$("#" + ControlId).click(function () { $("#" + ControlId + " options").hide(); });
EDIT3: You're trying to have a placeholder for SELECT tag , currently it is unavailable. Remove your inline styles for select and add the following css to your code.
select { max-width:150px; background:White; height: 25px; } /* Hidden placeholder */ select option[disabled]:first-child { display: none; }
check out this JSFiddle in Firefox.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.