CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
Frank Lucas
Frank Lucas

Reputation: 592

jQuery disable other dropdown values based on selected value of other dropdown

I have in my website 3 dropdowns and every dropdown has 8 options (1 to 8). My goal is to disable the dropdown options based on what you've already selected in the other dropdowns, the total sum is maximum 8. So for example if you select 4 in the first dropdown you can only select 1 to 4 in the other 2 dropdowns.

If you select 8 in the first you can't select anything else from the others.

This is what I've tried:

$(".options select").change(function() {
  var value1 = $("#input_1_5").val();
  var value2 = $("#input_1_6").val();
  var value3 = $("#input_1_7").val();
  var sum = parseInt(value1) + parseInt(value2) + parseInt(value3);
  var rest = 9-sum;

  $("#input_1_6 > option").slice(rest,9).each(function() {
    $(this).attr("disabled", true);
    });

  var rest2 = rest - 9
  $("#input_1_7 > option").slice(rest2,9).each(function() {
    $(this).attr("disabled", true);
    });
});

The problem with this is that it only work the first time you select something, unfortunately.

EDIT: jsfiddle update https://jsfiddle.net/k7krx87L/4/

Thanks in advance!

Upvotes: 0

Views: 1816

Answers (3)

Vidya
Vidya

Reputation: 153

Try this, it will work perfectly.

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
  <link rel="stylesheet" type="text/css" href="/css/result-light.css">
  <script type="text/javascript">
    $(window).load(function(){
        var $dropdown1 = $("select[name='project_manager[]']");
        var $dropdown2 = $("select[name='test_engineer[]']");
        var $dropdown3 = $("select[name='viewer[]']");

        $dropdown1.change(function() {
            $dropdown2.empty().append($dropdown1.find('option').clone());
            $dropdown3.empty().append($dropdown2.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $dropdown2.find('option[value="' + selectedItem + '"]').prop('disabled', true);
                $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
            }
        });

        $dropdown2.change(function() {
            $dropdown3.empty().append($dropdown2.find('option').clone());
            var selectedItem = $(this).val();
            if (selectedItem) {
                $dropdown3.find('option[value="' + selectedItem + '"]').prop('disabled', true);
            }
        });
});

</script>
</head>
<body>
  <select name="project_manager[]">
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>

<select name="test_engineer[]"  >
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
<select name="viewer[]" >
  <option></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
</select>
  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "vrLr9wyg"
      }], "*")
    }
  </script>
</body>
</html>

Upvotes: 0

Arokiyanathan
Arokiyanathan

Reputation: 94

<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script>
 $(function () {


    $('#input_1_5').on('change', function (){
        var input_1_5 = $(this).val();
        var input_1_6 = $('#input_1_6').val();
        var input_1_7 = $('#input_1_7').val();
        var cur_val;
        cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
        for(i=1;i<=8;i++)
        {
            if((i+parseInt(cur_val))<=8)
            {
                 $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
                 $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
            }
            else
            {
                 $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
                 $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
            }
        }
    });
    $('#input_1_6').on('change', function (){
        var input_1_5 = $('#input_1_5').val();
        var input_1_6 = $(this).val();
        var input_1_7 = $('#input_1_7').val();
        var cur_val;
        cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
        for(i=1;i<=8;i++)
        {
            if((i+parseInt(cur_val))<=8)
            {
                 $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
                 $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false);
            }
            else
            {
                 $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
                 $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true);
            }
        }
    }); 
    $('#input_1_7').on('change', function (){
        var input_1_5 = $('#input_1_5').val();
        var input_1_6 = $('#input_1_6').val();
        var input_1_7 = $(this).val();
        var cur_val;
        cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7);
        for(i=1;i<=8;i++)
        {
            if((i+parseInt(cur_val))<=8)
            {
                 $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false);
                 $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false);
            }
            else
            {
                 $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true);
                 $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true);
            }
        }
    });

 });
</script>

 <select name="" id="input_1_5">
     <option value="0">0</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
 </select>
 <select name="" id="input_1_6">
     <option value="0">0</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
 </select>
 <select name="" id="input_1_7">
     <option value="0">0</option>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
 </select>

</body>
</html>

Hope this will help you.

Upvotes: 0

Maposa Takalani
Maposa Takalani

Reputation: 338

You would use the following selector:

$("#input_1_6 option:gt(4)").prop("disabled", true);

This means disable all options in element with id #input_1_6 starting from 5th, the selector gt(4) means elements from index 4, indexes start from 0 in DOM.

Upvotes: 1

Related Questions