3

I have three dropdowns. I want that when the user selects any item from dropdown 1, then that item should be disabled in dropdown 2 and 3. Also, if an item is selected in dropdown 2, then both selected items must be disabled from dropdown 3.

Here is the code I am using:

<!DOCTYPE html>
<html>
<head>
  <script>
    function updateSelect(changedSelect, selectId) {
      var otherSelect = document.getElementById(selectId);
      for (var i = 0; i < otherSelect.options.length; ++i) {
        otherSelect.options[i].disabled = false;
      }
      if (changedSelect.selectedIndex == 0) {
        return;
      }
      otherSelect.options[changedSelect.selectedIndex].disabled = true;
    }
  </script>
</head>
<body>
  <select id="select_1"  onchange="updateSelect(this,'select_2'),updateSelect(this,'select_3');"   name="indication_subject[]">
    <option value="" selected="selected">a </option>
    <option value="1"> Accounting</option>
    <option value="2"> Afrikaans</option>
    <option value="3"> Applied Information and Communication Technology</option>
    <option value="4"> Arabic</option>
    <option value="5"> Art and Design</option>
    <option value="6"> Biology</option>
    <option value="7"> Business Studies</option>
  </select>
  <select id="select_2" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_3');" >
    <option value="" selected="selected">a </option>
    <option value="1"> Accounting</option>
    <option value="2"> Afrikaans</option>
    <option value="3"> Applied Information and Communication Technology</option>
    <option value="4"> Arabic</option>
    <option value="5"> Art and Design</option>
    <option value="6"> Biology</option>
    <option value="7"> Business Studies</option>
  </select>
  <select id="select_3" name="indication_subject[]" onchange="updateSelect(this,'select_1','select_2');" >
    <option value="" selected="selected">a </option>
   <option value="1"> Accounting</option>
   <option value="2"> Afrikaans</option>
   <option value="3"> Applied Information and Communication Technology</option>
   <option value="4"> Arabic</option>
   <option value="5"> Art and Design</option>
   <option value="6"> Biology</option>
   <option value="7"> Business Studies</option>
  </select>
</body>
</html>

Below is the JSFiddle link which works for two dropdowns, not three. How can I add a third dropdown for this?

http://jsfiddle.net/x4E5Q/1/

Improve this question
0

3 Answers 3

Reset to default
10

Try This:

HTML

<select id="select1" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select2" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

<select id="select3" name="indication_subject[]">
  <option value="" selected="selected">a </option>
  <option value="1"> Accounting</option>
  <option value="2"> Afrikaans</option>
  <option value="3"> Applied Information and Communication Technology</option>
  <option value="4"> Arabic</option>
  <option value="5"> Art and Design</option>
  <option value="6"> Biology</option>
  <option value="7"> Business Studies</option>
</select>

JS

$(document).ready(function(){  
  $("select").change(function() {   
    $("select").not(this).find("option[value="+ $(this).val() + "]").attr('disabled', true);
  }); 
});

Demo

Improve this answer
10
  • it works but it does not hide the item of second bar select accounting in first then africa in second and applied in three then see the results
    – Jam Dev
    Commented Jun 11, 2013 at 10:35
  • instead of showing alert it should be also disable as other are
    – Jam Dev
    Commented Jun 11, 2013 at 10:37
  • instead of error it may disable it also in the dropdown so that user may not select prevoiusly selected
    – Jam Dev
    Commented Jun 11, 2013 at 10:37
  • please test place Accounting in first Afrika in second then again it should not show both option in third(i.e Accounting and Afrikans)
    – Jam Dev
    Commented Jun 11, 2013 at 10:45
  • it doesnot show it disabled but the user will not be able to select it! is not thatr enough? :)
    – Mohammad Areeb Siddiqui
    Commented Jun 11, 2013 at 11:10
0 
See below code

    $(document).ready(function() {
      $("select").on('hover', function () {
            $previousValue = $(this).val();
        }).change(function() {
            $("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);
            $("select").not(this).find("option[value='"+ $previousValue + "']").attr('disabled', false);
        });
    });

$("#confirm-form").submit(function(e) {
    e.preventDefault();
    $("select").find("option").removeAttr('disabled');
    document.getElementById('confirm-form').submit();
});
Improve this answer
3
  • Hi, using disabled prevents the value from Posting to Server, how can we achieve the same - but also get it to POST
    – Transformer
    Commented Aug 15, 2017 at 6:27
  • 1
    @transformer : Yes that's correct but we can remove the disabled attribute on form submit. Please see the updated code.
    – user3740116
    Commented Aug 16, 2017 at 8:29
  • Thanks, that was wonderful. If you want to answer this SO question ... I can mark as answer
    – Transformer
    Commented Aug 17, 2017 at 16:48
0 
$(document).ready(function(){  

  $("select").on('focus', function () {
        $("select").find("option[value='"+ $(this).val() + "']").attr('disabled', false);
    }).change(function() {

        $("select").not(this).find("option[value='"+ $(this).val() + "']").attr('disabled', true);

    });


});
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.