jQuery : Disable and Enable Selected Options in DropDownList

DEMO This post explains how to dynamically disable and enable selected options from a typical html select input element using jquer...




This post explains how to dynamically disable and enable selected options from a typical html select input element using jquery. With jQuery, it is easy to manipulate DOM elements and write lesser code than we would write in Javascript.

In this example, I am going to disable selected options and display it in a div when selected. The users will have an option to again enable the selected option by removing it from the selected options div.

To disable the selected option from select input element, following piece of code can be used,

$("#selectid option:selected").attr('disabled','disabled');

and to enable an option that is disabled already,

$("#selectid option[value="somevalue"]").removeAttr('disabled');

In this example, let us have one div for each option of select element with the option text and a remove link which will be hidden by default. When a user selects an option, we will display the corresponding div for that option and disable the option in the select element. The user can again enable the option by clicking on the remove link.

<html>
<head>
<title>Disable and Enable Select Options using jQuery</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#ddTest").change(function(){          
     var value = $("#ddTest option:selected").val();
     if (value === '') return;
     var theDiv = $(".is" + value);
     //displays the selected option div
     theDiv.slideDown().removeClass("hidden");
     //disbales the selected option
     $("#ddTest option:selected").attr('disabled','disabled');
     $(this).val('');
 });   
 $("div a.remove").click(function () { 
     var value = $(this).attr('rel');
     var theDiv = $(".is" + value);
     //enables the disabled option
     $("#ddTest option[value=" + value + "]").removeAttr('disabled');
     //hides the selected option div
     $(this).parent().slideUp(function() { $(this).addClass("hidden"); });
 });
});
</script>
<style type="text/css">
.hidden {
    display: none;
}
</style>
</head>
<body>
    <div class="selectContainer">
        <select id="ddTest">
            <option value="">- Select Option-</option>
            <option value="Option1">Option 1</option>
            <option value="Option2">Option 2</option>
            <option value="Option3">Option 3</option>
        </select>
    </div>
    <div class="hidden isOption1">Option 1 <a href="#" class="remove" rel="Option1">remove</a></div>
    <div class="hidden isOption2">Option 2 <a href="#" class="remove" rel="Option2">remove</a></div>
    <div class="hidden isOption3">Option 3 <a href="#" class="remove" rel="Option3">remove</a></div>
</body>
</html>



Subscribe to GET LATEST ARTICLES!


Related

Jquery 4152270758352170027

Post a comment

  1. I have been searching for a useful post like this on salesforce course details, it is highly helpful for me and I have a great experience with this Salesforce Training who are providing certification and job assistance.
    Salesforce training in Hyderabad  

    ReplyDelete
  2. Thanks for every other informative site. The place else may just I get that kind of information written in such an ideal means? I have a venture that I’m just now operating on, and I have been on the look out for such information 먹튀검증

    ReplyDelete
  3. In the event that you are seeing some issue with your Brother Printer as it is associated yet at the same time not printing, the explanation could be anything behind it. In any case, you can fix this issue by doing some essential investigating. What's more, to assist you with this, this post has presented to you some data and directions to follow. In this way, go completely.
    Why is my Brother printer not printing

    ReplyDelete

emo-but-icon

SUBSCRIBE


item