How to implement three select boxes and handle selection with JavaScript?

Question

I need to implement 3 select boxes on a page wherein the value selected in one box should not appear on the next select boxes. Can I have detailed explaination to this with code? A newbie in JS. Let me know if this can be done with PHP too. Thanks in advance. Here goes the sample code.. Let me know why its not taking the JS script:

    <html>
    <head>
<title>check</title>
<body>


<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<select name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

<script>
$('select').change(function() {
    var myOpt = [];
    $("select").each(function () {
        myOpt.push($(this).val());
    });
    $("select").each(function () {
        $(this).find("option").prop('hidden', false);
        var sel = $(this);
        $.each(myOpt, function(key, value) {
            if((value != "") && (value != sel.val())) {
                sel.find("option").filter('[value="' + value +'"]').prop('hidden', true);
            }
        });
    });
});
</script>

</body>
</head>
</html>

u mean after select first the value of next select box appears based on first selection ? — Maninderpreet Singh
– Maninderpreet Singh, Commented Mar 25, 2016 at 6:23
Yeah.. The next select box should not show value selected in first select box and so on. — Anand Shankar
– Anand Shankar, Commented Mar 25, 2016 at 6:27
first of all give ids to ur select box that make some difference — Maninderpreet Singh
– Maninderpreet Singh, Commented Mar 25, 2016 at 6:28
I tried giving id's. . Still no success @Maninderpreet. Do i need to give ID's to the option field? or the <select> tag — Anand Shankar
– Anand Shankar, Commented Mar 25, 2016 at 6:34

ali · Accepted Answer · 2016-03-25 06:44:43Z

6

Hope this answer will solve your query:

$('select').change(function() {
  var val = $(this).val();

  $("select").not(this).each(function(index, item) {
      $(item).find("option[value='" + val + "']").remove();
  });
});

Or you can go through to jsfiddle link for live demo.

answered Mar 25, 2016 at 6:44

ali

5672 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anand Shankar Over a year ago

I tried this from the same URL which you have provided. But I want a step by step guidance. Thanks Do let me know where am I going wrong in the code i provided.

Anand Shankar Over a year ago

Do I need to download jquery lib first??

Maninderpreet Singh Over a year ago

yes u need to include jQuery lib first @AnandShankar

Anand Shankar Over a year ago

Thanks @maninderpreet. Its working.. :) Cheers to helping the world !! :) I might come back for few more solutions on other tpoics related to the question. :)

ali Over a year ago

Populate dropdown select with array using jQuery

|

Đào Minh Hạt · Accepted Answer · 2016-03-25 08:17:36Z

0

Why dont you just use multiple select box?

<select multiple name="name[]" class="select">
    <option value="">Select</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

answered Mar 25, 2016 at 8:17

Đào Minh Hạt

2,92618 silver badges20 bronze badges

2 Comments

Anand Shankar Over a year ago

I can. but i need to put three select boxes with selected value not showing up in next and then next.

Anand Shankar Over a year ago

hi.. I need to add three select boxes with same data coming from database. how to do this with while loop? Any help with code?

Collectives™ on Stack Overflow

How to implement three select boxes and handle selection with JavaScript?

2 Answers 2

6 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related