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
  4. Your blog website provided us with useful information to execute with. Each & every recommendations of your website are awesome. Thanks a lot for talking about. satta matka

    ReplyDelete
  5. Perdisco MYOB assignments help from myperdiscohelp.com assures an A+ grade in your accounting assignments. Perdisco Myob We are accessible 24/7 contact us to get assignments done at very affordable rate. Our PHD scholars and professionals are ready for your assistance. We come up with the best, outstanding and high quality assignment help. Our service is punctual and on time.

    ReplyDelete

  6. Assignments Help Canada

    Best assignment experts provide Assignments Help Canada at a very low and affordable price with discounts. Our professionals and PhD. scholars will always provide you with the best and high-quality assignments.

    ReplyDelete
  7. How to Connect Brother Printer to WiFi-Don't you simply disdain those occasions at whatever point something should be printed rapidly? In any case, your brother printer is put away a long way from you, or you need to continue to connect a bulky USB link? A wireless association with a wireless Brother printer will permit you to print, fax, and sweep without being actually Connect brother wireless printer to wifi router appended to the unit. We should investigate associate the Brother printer to WiFi. Wireless printing is currently incredibly helpful at home and the wor environment. Most up-to-date Brother printers can interface straightforwardly to your WiFi or I can say wireless network. This will permit you to take a print with the assistance of your wireless Brother printer from any PC on your wireless loyalty network.

    ReplyDelete
  8. Nice blog. Thanks for sharing this blog, keep sharing some more blogs again soon.
    Data Science Training in Hyderabad with placements

    ReplyDelete
  9. If you are looking for an Assignment Helper in Malaysia, then get in touch with us to receive top-notch quality assistance and writing services from experts who have been in the industry for years and have extensive knowledge in writing content for students in Malaysia.

    ReplyDelete
  10. Nice post!!for sending multiple msgs visit Sms Bomber and also check Kerala lottery result
    Satta Matka and also check Matka Result

    ReplyDelete
  11. Well-written and nice blog, keep sharing more blogs again soon.
    Artificial Intelligence Course with placements

    ReplyDelete
  12. i READ THIS BLOG,THANKS FOR SHARING THIS INFORMATION.

    <A HREF="WEB-DESIGNING COURSE IN PUNE</A>

    ReplyDelete
  13. My Assignment Expert
    Our service is convenient and easily accessible to all national and international students. Our writers are very punctual and follow a strike timetable.
    Medical assignment help

    ReplyDelete
  14. Searching for a reliable and trustworthy website with your SQL homework help? Worry not, My Assignment Experts with a group of 150 Ph.D. professors and top-notch SQL expects, scholars and programmers are now in your city to help you out.

    ReplyDelete
  15. I am glad that I saw this post. It is informative blog for us and we need this type of blog thanks for share this blog, Keep posting such instructional blogs and I am looking forward for your future posts. Python Projects for Students Data analytics is the study of dissecting crude data so as to make decisions about that data. Data analytics advances and procedures are generally utilized in business ventures to empower associations to settle on progressively Python Training in Chennai educated business choices. In the present worldwide commercial center, it isn't sufficient to assemble data and do the math; you should realize how to apply that data to genuine situations such that will affect conduct. In the program you will initially gain proficiency with the specialized skills, including R and Python dialects most usually utilized in data analytics programming and usage; Python Training in Chennai at that point center around the commonsense application, in view of genuine business issues in a scope of industry segments, for example, wellbeing, promoting and account. Project Center in Chennai

    ReplyDelete
  16. While one kind of storage bare metal data center space is typically adequate for tiny firms, the bigger business will certainly commonly have a blended storage space connect with various kinds for various divisions, duties, as well as branches.

    ReplyDelete
  17. The kedarnath trek is 16km long trek which starts from gauri kund to kedarnath. The path of this trek has been changes after the 2013 flood earlier the length of this trek is 14kms but after the floods it has changes to 16kms. It is a very popular trek in Himalayas and the main reason of being it so popular is the summit climb. As you start your trek in the early hours of the morning and steadily climb up the steep slope, the world opens up around you.

    kedarnath trek

    ReplyDelete

emo-but-icon

SUBSCRIBE


item