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, Mar 25 '16 at 06:23
Yeah.. The next select box should not show value selected in first select box and so on. — Anand Shankar, Mar 25 '16 at 06:27
first of all give ids to ur select box that make some difference — Maninderpreet Singh, Mar 25 '16 at 06:28
I tried giving id's. . Still no success @Maninderpreet. Do i need to give ID's to the option field? or the — Anand Shankar, Mar 25 '16 at 06:34

score 6 · Answer 1 · answered Mar 25 '16 at 06:44

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 '16 at 06:44

ali

557
2
13

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 Mar 25 '16 at 06:56
Do I need to download jquery lib first?? – Anand Shankar Mar 25 '16 at 06:59
yes u need to include jQuery lib first @AnandShankar – Maninderpreet Singh Mar 25 '16 at 08:40
Thanks @maninderpreet. Its working.. :) Cheers to helping the world !! :) I might come back for few more solutions on other tpoics related to the question. :) – Anand Shankar Mar 25 '16 at 09:28
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? – Anand Shankar Mar 26 '16 at 06:19
1

[Populate dropdown select with array using jQuery](http://stackoverflow.com/questions/3446069/populate-dropdown-select-with-array-using-jquery) – ali Mar 26 '16 at 11:14

score 0 · Answer 2 · answered Mar 25 '16 at 08:17

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 '16 at 08:17

Đào Minh Hạt

2,742
16
20

I can. but i need to put three select boxes with selected value not showing up in next and then next. – Anand Shankar Mar 25 '16 at 09:13
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? – Anand Shankar Mar 26 '16 at 06:20

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

2 Answers2