Dynamic change max values in select with javascript [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 8 years ago.

Improve this question

I have 2 selects like this:

<select id='select1'>
<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>
</select>


<select id='select2'>
<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>
</select>



<select id='select3'>
<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>
</select>

In this example, 5 is a max so if I select the value 2 in select1, I want my select2 and select3 to have as max value : 5 - 2 = 3 to get this final output:

<select id='select2'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>

<select id='select3'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
</select>

Of course, the behaviour should be the same regardless of the items I choose.

Answer 1

Try this -

$( document ).ready(function() {
    $("#select1").change(function(){
        $("#select2 option, #select3 option").show();
        var maxValue = 5 - $(this).val();
        for (var i = 5; i > maxValue; i--)
        {
            $("#select2 option[value='"+i+"'], #select3 option[value='"+i+"']").hide();
        }
    });
});

Demo - http://jsfiddle.net/9DAE4/3/

Answer 2

var sel = $('#select2,#select3');
$('#select1').change(function () {
    var val = this.value; //get value
    sel.val('1').find('option').show(); //set value 1 to select 2,3 and show all options
    sel.find('option[value="' + val + '"]').nextAll('option').hide(); //hide nextAll values next to max value
});

fiddle Demo

---

Reference

.change()

.nextAll()

.val()

.find()

Attribute Equals Selector

---

Updated fiddle Demo

var sel = $('#select2,#select3');
$('#select1').change(function () {
    var val = 5 - this.value;
    sel.val('1').find('option').show();
    if (val === 0) {
        sel.find('option').hide();
    } else {
        sel.find('option[value="' + val + '"]').nextAll('option').hide();
    }
});

Answer 3

In this case you have to use onChange event on select of first select box.This event will call a javascript method and that method will dynamically create/modify other select boxes.