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. i READ THIS BLOG,THANKS FOR SHARING THIS INFORMATION.

    Web-designing course in pune

    ReplyDelete
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. Great blog. I love your writing skill and the manner in which you explain. You are motivated to be the new blogger. Thanks a lot for sharing such amazing content with us. I would love to recommend it to my family and friend. You just keep posting. Thanks once again. I am posting links to my blogs on trekking. If you are interested please do visit my website.
    Triund and Laka Glacier Trek
    Triund Trek
    Brahmatal Trek
    KedarkanthaTrek
    SandakphuTrek
    Chopta Tunganath Chandrashila Trek

    ReplyDelete
  20. This comment has been removed by the author.

    ReplyDelete
  21. I found this one pretty fascinating, and you should go into my collection also when will tasued post utme form be out. We provide school admission updates and scholarship opportunities, among other services all over the world. I am impressed with your article. I appreciate it, please keep writing more content.

    ReplyDelete
  22. The assignment is due tomorrow and the assignment instructions are too much for you. You need assignment help now! It seems like you're not the only one though, as assignment help has become a popular search term because students have been feeling this way more often than they used to. That said, it's time to start asking yourself why these assignments are so overwhelming in the first place.

    ReplyDelete
  23. Thank you for sharing this information; it was quite helpful to me. driving directions mapquest

    ReplyDelete
  24. Fortnite, Apex Legends, and Rocket League are all free-to-play on Nintendo Switch and are available for digital download on the eShop. It's hotly debated in the FNF community right now whether it makes sense to be playing the game on the Switch or not, but what we do know is that many fans do not realize that you can play the game on a console at all. Can Friday Night Funkin reach these console players? And more importantly, will you continue to support the game if it does?

    ReplyDelete
  25. Very use full post, thanks for sharing...also visit this website to know more about Mt Friendship Peak Expedition

    ReplyDelete
  26. Thanks for sharing, this was an incredibly wonderful article.!....keep sharing such nice post...

    Mount Kedar Dome, as the name suggests, is a majestic, dome-shaped peak draped within the folds of the Garhwal Himalayas that form the Gangotri peaks...read more..Kedar Dome Peak

    ReplyDelete
  27. This is a good website, I have been reading its articles for a long time. If I do not find a solution to any problem, then I come and search on this website. However, a lot of work has happened that day when I did not get the answer to my question. If you like to travel, then you can book these packages -
    Holiday Moods
    Switzerland Tour Package
    Paris Tour Package
    France Tour Package

    ReplyDelete
  28. This blog has given me all the information I have been looking for, and I want to say thank you. I wish you more knowledge to do more of this. Click on this link to see the Write For Us Telemarketing

    ReplyDelete
  29. The artistic style of sharing information had kept me bound throughout the blog. I would like to thank the writer for sharing such amazing and informative content with us and will share it with my friends and family members. I also request the writer to keep sharing such interesting content with us. I am sharing some links on adventure activities on my website. If you are interested in adventure then you can have a look at it.
    Paragliding in Bir Billing
    Camping and Paragliding in Bir Billing
    Sky Cycling in Bir Billing
    Paragliding and camping in Bir Billing
    Bunjee Jumping in Bir Billing

    ReplyDelete
  30. This comment has been removed by the author.

    ReplyDelete
  31. Hi, I'm Law Rence. I read your post and I was Impressed by your post a lot. You keep posting like this. Thank you for Sharing. Click Here If You Know About Assignment Writer

    ReplyDelete
  32. Hi, I am David Johnson, I am fortunate enough to complete my academics at the university of GRAZ in Australia. Have a 7 year experience in assignment writer, and I am an assignment expert and helping student in doing their work.

    We offer exceptional quality of help for Programming Assignment, Statistics Assignment, Business Assignment, Engineering Assignments, Law Assignments and many more assignment is available here.
    URL:- https://thestudenthelpline.com/au/

    ReplyDelete
  33. Thank you for sharing this informative post. Assignment Help Canada is giving homework help to students. We are already trusted by thousands of students who struggle to write their academic papers.

    ReplyDelete
  34. The artistic style of sharing information had kept me bound throughout the blog. I would like to thank the writer for sharing such amazing and informative content with us and will share it with my friends and family members. I also request the writer to keep sharing such interesting content with us. I am sharing some links on adventure activities on my website. If you are interested in adventure then you can have a look at it.
    Paragliding in Bir Billing
    Friendship peak trek
    Rajgundha Trek
    Ali Bedni Bugyal Trek


    ReplyDelete
  35. Matlab assignment helpers for online MATLAB Assignment Help services take utmost care of your assignments by keeping the codes simple yet of high quality Avail MATLAB programming assingment help at affordable price.

    ReplyDelete
  36. Thanks for sharing, Sample assignment has an experienced team of assignment experts who works with the motive to enhance the academic grades of students through Assignment Help Experts.

    ReplyDelete
  37. Char dham Nestled among the serene heights of the great Himalayas are four pilgrim-destinations namely Yamunotri, Gangotri, Kedarnath, and Badrinath...read more..Chardham Tour Pacakges
    Also read.. Auli Skiing Tour

    Kun Peak Expedition
    Kalindi Khal Trek Expedition

    ReplyDelete
  38. I enjoyed reading your full article, Your plan tips are very much appreciated in this article. I like the way you are experess though. Thanks for sharing.


    Amarnath Tour Pacakges

    ReplyDelete
  39. Nice short code for JQuery! If you want to build your career as a programmer or a Full-Stack developer then learn from the best Full stack with NodeJs training course in Indore, India through certified experts.

    ReplyDelete
  40. Whizcamp a Startup Studio has been dealing with Enterprises, Startups and Agencies since 2017 providing the services in terms of Enterprise Web Development, Startup Consulting, Mobility Solutions, Branding and UI/UX Consulting.

    Tech Startups Studio
    Best App Development Company for Startups
    Healthcare App Development Solutions

    ReplyDelete

  41. Hello everyone! I am Elliza allen. I am an academic writing expert, where I have been working for the last 10 years. Searching for the do my coursework ? you can get the coursework help on our Paper Writing Help. Law Dissertation Topics is given by expert coursework help who have worked on many academic writing projects.clinical reasoning cycle given by our expert top quality assignment will guarantee your success so take it from us and enjoy the assignment writing assistance.

    ReplyDelete
  42. Homework Help | Best Website for Online Assignment Help in
    Homework Help:
    Get plagiarism-free Homework or Assignment help with step-by-step solutions & dedicated tutoring sessions from global expert tutors.
    ‎Online Homework Help · ‎Physics Homework Help Online . Online Assignment Help

    ReplyDelete
  43. your article so amazing and informative. Your writing skill is also very well. Your article is really addictive. Keep posting. keep sharing the knowledge. I love to read your articles.
    english stories english short stories with moral value What is the factorial of 100

    ReplyDelete
  44. I am very glad to read this article. I appreciate your work and inspiration. I also recommended my friends to explore this blog.

    Valley of Flowers Trek, Uttarakhand

    Read more..Chardham Tour PacakgesMarkha Valley Trek

    ReplyDelete
  45. Your information is very very helpful for me and good Blog
    Kalyan Matka
    kalyan matka result

    ReplyDelete
  46. I’ve been looking for something like this for a long time. Thank you very much for sharing this fantastic article! Do my assignment is a service that is sought out. It is always helpful to have someone else help you out with your work.

    ReplyDelete
  47. This Was A Great And Interesting Article. Did you know that almost 80% of males in the globe suffer from hair loss? check out Simfort Shampoo's Benefits

    ReplyDelete
  48. Watch and Download world's famous Turkish action drama Kurulus Osman Season 3 in English on link below
    👇
    Kurulus Osman Season 3

    Kurulus Osman Season 3 Episode 1
    On link below
    Kurulus Osman Season 3 Episode 1

    Crypto trading course
    Join on link below
    Crypto quantum leap

    YouTube course
    Be a professional YouTuber and start your carrier
    Tube Mastery and Monetization by matt

    Best product for tooth pain ,
    Cavity ,
    Tooth decay ,
    And other oral issues
    Need of every home
    With discount
    And digistore money back guarantee
    Steel Bite Pro

    ReplyDelete
  49. Hey friend, it is very well written article, thank you for the valuable and useful information you provide in this post. Keep up the good work! FYI, what does it mean when a cat headbutts you, Pottery Barn Credit Card Review , The book you wish your parents had read book pdf download,My School Essay 10 Lines in English

    ReplyDelete
  50. hi guys do you know about windows annoying error 0x0 0x0 to about it and how to fix it please check guide about 0x0 0x0

    ReplyDelete
  51. We can help you with your assignment and make sure that it is done in a timely manner. We have a team of writers who are skilled in various academic fields and have years of experience in writing. do my assignment provide all kinds of academic services like essays, dissertations, research papers and more.

    ReplyDelete
  52. Click more stuff has all the latest news, fashion tips and site reviews... https://clickmorestuff.com/

    ReplyDelete
  53. The contents here is always neat and very educative and as well useful, the reason I make it my regular blog of visit so as to widen my knowledge every day, thanks for always sharing useful. I appreciate you for sharing. Also visit dragnet past questions nairaland and answers pdf format

    ReplyDelete
  54. Assignment Assistance New Zealand's services by Thetutorshelp.com are designed for students studying in the country. This includes all kinds of support for students who come to carry out their assignments successfully. As part of completing an essay or study course, it is common in New Zealand universities to assign students various assignments to prove their point. Direct communication with professors can sometimes be stressful for students, which is why Thetutorshelp.com provides immediate help to students in completing their assignments.
    https://www.thetutorshelp.com/new-zealand.php
    Assignment Help in New Zealand

    ReplyDelete
  55. Thanks for sharing such meaningful information. I am waiting for a long and feel energetic after reading such a post. I am looking forward to the genuine way to transform information from one place to another place. I am glad to link your website with the Assignment Help Online domain. I prefer to subscribe to our website so that any meaningful information cannot remain for further reading.

    ReplyDelete
  56. I really enjoyed all of articles on this website, I hope you will continue to have similar posts to share with everyone.
    colour printers
    colour printing sydney

    ReplyDelete
  57. The information provide in this blog is really worthy. Keep posting such type of information. Thanks for sharing the informative and perfect post.
    Kami Furniture
    Wooden Furniture design

    ReplyDelete
  58. Really informative and inoperative, Thanks for the post and effort! Please keep sharing more such blog. Visit Naughty Girls

    ReplyDelete
  59. Do you find it difficult to write your projects on your own? Relax, your assignment tension is now on Sample Assignment's shoulders. Many students find it difficult to keep their academic balance by finishing their university projects on their own due to the short deadlines of complex tasks. As a result, they seek expert assistance to do my assignment . Sample Assignment is a service provider that supplies students in Canada with professional and economical assignment writing services. Sample Assignment has a team of over 5000 academic writers who aid students in Canada with their assignments. Students can deliver their college assignments on time by using their homework assistance services.

    ReplyDelete
  60. I appreciate this informative post share by you. Satta Matka Market is the best choice option for you for Matka Market, satta market, DPBoss matka also. But, satta market is based on the number selected by you so, play on your risk.

    ReplyDelete
  61. This comment has been removed by the author.

    ReplyDelete
  62. really informative article about programming if you want to read more about news related article you can visit here newsdustbin.com

    ReplyDelete
  63. Very informational blog
    If you are facing issues with preparation of your exams and looking for online exam help Malaysia then visit Malaysiaassignmenthelp.com and get help with your exams at affordable rates.

    ReplyDelete
  64. Very useful post. This is my first time i visit here. I found so many interesting stuff in your blog especially its discussion. Really its great article. Keep it up.
    Camping in Rishikesh
    Camping Packages in Rishikesh
    Camping in Rishikesh
    Rishikesh Camping Packages

    ReplyDelete
  65. Write My Essay: You can now buy you assignment help, made by expert writers with professional experience in the field!.

    ReplyDelete
  66. While disabling and enabling selected options in DropDownList using jQuery, a question arose in my mind as to whether can we change the background image of DIV using jQuery? Dissertation Help Online

    ReplyDelete


  67. Are you always scrambling around trying to find the best deals, promo codes and coupons on the internet to get discounts? With DazzDeals, you don’t have to! Avail all of the coupons all in one place today in one complete and convenient platform.Get promo code here

    ReplyDelete
  68. FNF is one of the most outstanding games in recent times. This game is a perfect match for you to improve your reaction. Friday Night Funkin has a simple gameplay but it's very hard to win, so I recommend you choose the easy mode to play before moving on to the harder level.

    ReplyDelete
  69. Do you search for assignment help in ireland for boosting your grades with the help of experts, then do not worry and hire qqi assignments services. We avail you of assignment writing help with unique and original content before the deadline at nominal prices with the help of our professional Phd experts.

    ReplyDelete
  70. Hire our professional writers to heal your poor grades. We are a reputed academic assignment expert writing service providing platform. If you find homework writing a hectic task then you should be hiring a helper from our platform. We provide assignment expert uk help at cost-effective prices. Anyone can have our online educational writing facilities and get their work done at the correct time.

    ReplyDelete
  71. Thinking Can someone do my assignment for me in Malaysia?, stop thinking you can get your assignments completed by the professional academic writers with error-free and plagiarism free content here in Malaysia so, get your assignments completed by the experts and enjoy good results.

    ReplyDelete
  72. If there are any changes for 2023, we think they'll come in the forms of adjusted range, modified performance, added software features, or maybe even a lower-cost trim level.
    2023 tesla model x

    ReplyDelete

emo-but-icon

SUBSCRIBE


item