Tag Archives: select element

HTML select element and jQuery

The HTML select element represents a control that presents the collection of the options. The options within the collection are represented by option elements. The select element behaves just like a menu that contains the various sub menu-items. In this post we will see the various task on the select and option elements using jQuery. Continue reading HTML select element and jQuery

Restrict selection of some options in select element without disabled attribute using jQuery

last day, One of my friend was facing a strange problem in the select element. His select element has some disabled options( using the disabled attribute), and element is working fine every where but failed in the safari (ipad) and also disabled attribute is not supported in Internet Explorer 7 and earlier versions.

disable options without disabled

After implementing some other possible solution we have found a way to restrict selection of some options in select element without disabled attribute using jQuery. In the below example we are using the .change() jQuery event of the select element.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript">
        $(function() {
            var lastSel = $("#ddlType option:selected");
            $("#ddlType").change(function(event) {
 
                if ($("#ddlType option:selected").index() > 1) {
                    event.preventDefault();
                    event.stopPropagation();
                    lastSel.attr("selected", true);
                    return false;
                }
                else {
                    lastSel = $("#ddlType option:selected");
                }
            });
        });
    </script>
    <style>
        .disablectrl
        {
            color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody><tr><td width="205">
            <select style="width: 230px;" id="ddlType">
                <option value="0" selected="selected">---Choose Program Type---</option>
                <option value="TEXT">Text</option>
                <option value="BASIC" class="disablectrl">Basic </option>
                <option value="ADVANCED" class="disablectrl">Advanced </option>
                <option value="SCORM" class="disablectrl">Program</option>
            </select>
          </td></tr></tbody>
    </table>
</body>
</html>

In the .change() event, code check the selected index if the condition does’t meet, code set the old selected value in the select element.