Bind the html select control from the comma separated string in JavaScript

The following code sample demonstrates how to bind the select control from the comma delimited string. The example contains a commas separated string, form which we will create the option elements of the select element Continue reading “Bind the html select control from the comma separated string in JavaScript”

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.