Pranav Shah Pranav Shah - 6 months ago 7
Javascript Question

Jquery set value into next select list based on previous one

Can we set select list item value i have multiple select list.Which is basically numbers only.
i.e

<select id="101_1">
<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="50"> 50</option>
</select>

<select id="101_2">
<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="50"> 50</option>
</select>

<select id="101_1">
<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="50"> 50</option>
</select>


i need to make sure if "select list value is 0 when id 101_1" then automatically new value must be set in next select list says "select list value is 1 when id 101_2"

OR

if it not possible then can we create a validation which test select list value and do not allow to select same value.

Answer

I opted to hide the option tag instead of remove as I suggested. Here is a complete working html file. I was going to post it on jsfiddle, but for some reason it wouldn't work. Be very aware of copy/paste errors in the .change handlers. Spent some time myself wondering why it wasn't working, but it was a copy/paste error.

Note that this code only works if every select tag has the same options. But, it works dynamically if you add or remove options later, while keeping them in sync as noted.

If you need it to work with lists with only some of the same options, you will be stuck dealing with having IDs on the options and then working the hiding/unhiding based on that instead of indexing into the children, but the basic mechanics are the same.

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <style type="text/css">
        .gone {display: none;}
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // hides the option selected in the others
            var hideValue = function(oldval, val, options, others) {

                var unhideChild = -1;
                var hideChild = -1;
                // find which child to hide in the others
                // also find the value we change from and unhide it
                for (var i=1; i<options.length; i++) {
                    var optval = $(options[i]).val();
                    console.log(optval);
                    if (optval == val) {
                        hideChild = i;
                    }
                    if (optval == oldval) {
                        unhideChild = i;
                    }
                }
                if (unhideChild == -1 && oldval != "None") {
                    console.log("uh oh");
                    return;
                }
                if (hideChild == -1 && val != "None") {
                    console.log("uh oh");
                    return;
                }

                // hide them using the passed in selectors
                for (var j=0; j<others.length; j++) {
                    if (oldval != "None") {
                        console.log("unhiding: " + others[j] + " v: " + unhideChild);
                        $($(others[j]).children()[unhideChild]).removeClass("gone");
                    }
                    if (val != "None") {
                        console.log("hiding: " + others[j] + " v: " + hideChild);
                        $($(others[j]).children()[hideChild]).addClass("gone");
                    }
                }
            }

            // we need to keep track of the old values so we can unhide them if deselected
            var val1 = "None";
            var val2 = "None";
            var val3 = "None"

            $('#101_1').change(function() {
                var opts = $('#101_1').children();
                var v = $('#101_1').val();
                hideValue(val1, v, opts, ["#101_2", "#101_3"]);
                val1 = v;
            });
            $('#101_2').change(function() {
                var opts = $('#101_2').children();
                var v = $('#101_2').val();
                hideValue(val2, v, opts, ["#101_1", "#101_3"]);
                val2 = v;
            });
            $('#101_3').change(function() {
                var opts = $('#101_3').children();
                var v = $('#101_3').val();
                hideValue(val3, v, opts, ["#101_2", "#101_1"]);
                val3 = v;
            });
        });
    </script>
</head>
<body>

    <select value="None" id="101_1">
        <option value="None">None</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select value="None" id="101_2">
        <option value="None">None</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select value="None" id="101_3">
        <option value="None">None</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</body>
</html>

Also, if you need the "None" value to not be there, remove it. Then just start the select ta 101_1 having 0 selected, 101_2 with 1 selected etc. Then make sure to trigger the change handler. Also, without the None option, the for loop needs to start with i=0.

So basically add this to the end of the script and make sure var i starts at 0 instead of 1.

$('#101_1').val('0');
$('#101_2').val('1');
$('#101_3').val('2');
$('#101_1').trigger('change');
$('#101_2').trigger('change');
$('#101_3').trigger('change');