blog post

We can remove the options from a list box by using client side Jquery. You can see the article explaining how to remove options to a list box using Jquery. First of all we store all option in optHtml variable, after that we perform action on change event of select, Map the selected option and sort in array variable which is called selecteds after that we perform loop iteration on select filter operation to check and match with selecteds variable and remove from select.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
  </head>
<body style="text-align:center;">
<h2>Multiple Unique Selection</h2>
<select name="numbers[]"  class="numbers">
    <option value="">None</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
</select>
<select name="numbers[]"  class="numbers">
    <option value="">None</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
</select>
<select name="numbers[]"  class="numbers">
    <option value="">None</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
</select>
<select name="numbers[]"  class="numbers">
    <option value="">None</option>
    <option value="01">01</option>
    <option value="02">02</option>
    <option value="03">03</option>
    <option value="04">04</option>
</select>


</body>
<script>
$(document).ready(function(){
    var $quest = $('.numbers');
    var optHtml = $quest.first().html();

    $quest.on('change', function () {
        var selecteds=$quest.find('option:selected').map(function(){
            if(this.value){
               return this.value 
            }
        }).get();

        $quest.not(this).each(function(){
            var selVal=this.value || '';
            var $opts=$(optHtml).filter(function(){
                return $.inArray(this.value,selecteds) ==-1 ||  this.value ==selVal
            });

           $(this).html($opts).val(selVal);
            
        })

    });


});
</script>

Multiple Unique Selection Jquery
  • Share This Story


Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla


I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Comments (1)

  • Vijay Shankar

    Wednesday, 06 April, 2016 09:50 AM

    Very Useful...Thanks for sharing

Leave a comment

Name
E-mail
Url
Message

Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email

 

Style Switcher

Change Color

×! We use cookies to improve your user experience. More information