Inter Dependant select fields

Abscooters · October 31, 2014

I'm looking for a way to have 5 different select menus. Each one pre-php-populated with the same data to begin with. Lets say numbers 1 through 5.

If user selects #2 in any of the lists, all the other lists #2 will dissapear from. With ultimately only one unique selection in each list (1 through 5).

Like having a list of 5 things to do and a select list next to each one to select the priority in which it gets done.

Is there a way to do this with ajax?

Barand · November 1, 2014

You don't AJAX, just javascript

Create dropdowns

<?php
for ($i=0; $i<5; $i++) {
    echo "<select class='sel' id='sel$i' name='sel$i'>
        <option value=''>---</option>";
    for ($j=1; $j<=5; $j++) {
        echo "<option value='$j'>$j</option>";
    }
    echo "</select> ";
}
?>

and the script

<script type="text/javascript">
    $().ready(function() {
        $(".sel").change(function() {
            var curID = $(this).attr("id");
            var chosen = $(this).val();
            $(".sel").each(function(i,v) {
                if (v.id != curID) {
                    $(v).children("option[value="+chosen+"]").hide();
                }
            })
        })
    })
</script>

Abscooters · November 1, 2014

I am fresh to PHP and understand even less java and ajax. Thank you for the script.

How do I call the script from the compiled drop downs so that they change when one is selected, am I missing something.

Barand · November 1, 2014

Here's a sample script using the above. PHP creates the dropdowns and sends the page to the browser. Once the page is open in the browser the JS checks for changes in the selections and updates the other dropdowns.

sample.php

<html>
<head>
<title>Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $(".sel").change(function() {
            var curID = $(this).attr("id");
            var chosen = $(this).val();
            $(".sel").each(function(i,v) {
                if (v.id != curID) {
                    $(v).children("option[value="+chosen+"]").hide();
                }
            })
        })
    })
</script>
</head>
<body>
<?php
for ($i=0; $i<5; $i++) {
    echo "<select class='sel' id='sel$i' name='sel$i'>
        <option value=''>---</option>";
    for ($j=1; $j<=5; $j++) {
        echo "<option value='$j'>$j</option>";
    }
    echo "</select> ";
}
?>
</body>
</html>

Abscooters · November 1, 2014

My Bad, I forgot to include the script source.

Thank you so much, this is what I have been looking for. :happy-04: I can modify that to do what I need it to do.

It works really good, is there a way to add a button that resets them all to unselected and unhidden without refreshing the page.

Barand · November 1, 2014

Revision with reset button

<html>
<head>
<title>Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $(".sel").change(function() {
            var curID = $(this).attr("id");
            var chosen = $(this).val();
            $(".sel").each(function(i,v) {
                if (v.id != curID) {
                    $(v).children("option[value="+chosen+"]").hide();
                }
            })
        })
        
        $("#btnReset").click(function() {
            $("option").show();
            this.form.reset();
        })
    })
</script>
</head>
<body>
<form>
<?php
for ($i=0; $i<5; $i++) {
    echo "<select class='sel' id='sel$i' name='sel$i'>
        <option value=''>---</option>";
    for ($j=1; $j<=5; $j++) {
        echo "<option value='$j'>$j</option>";
    }
    echo "</select> ";
}
?>
<input type='button' name='btnReset' id='btnReset' value='Reset'>
</form>
</body>
</html>

Abscooters · November 3, 2014

Thank you Barand so much!!!!!

Abscooters · November 7, 2014

OK I implemented it, and it works in firefox & chrome but not on IE or mobile devices. Is there a work around for them?

Barand · November 7, 2014

It seems IE doesn't like .hide() and .show()

Changing these to

.css("visibility","hidden")
.css("visibility","visible")

seems to work

Psycho · November 7, 2014

Barand,

I was just testing that script and there is a bug. When you change a value in one of the select lists it does not repopulate the value that is unselected into the other lists. So, if you select value "2" in the first select list, the "2" is removed from the other lists. But, if you then change the "2" to a "3", the "3" is removed from the other lists, but the 2 is not put back.

I think the solution is that we would have to store all the possible options in an array and then compare against that any time changes are made.

EDIT: Also, changing a value back to "--" removes that from any lists where it isn't selected.

Edited November 7, 2014 by Psycho

Barand · November 7, 2014

Thanks Psycho,

I confess I haven't been using jquery for very long so I don't know if my fix is optimal, but it seems to work. I used a "data-curr" attribute to store the current value of the selects so I would know what value to put back.

<?php
include("db_inc.php");  // defines credentials
$db = new mysqli(HOST,USERNAME,PASSWORD,'bogdaniel');
?>
<html>
<head>
<title>Sample</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $(".sel").change(function() {
            var curID = $(this).attr("id");
            var chosen = $(this).val();
            var curr = $(this).data('curr');
            $(".sel").each(function(i,v) {
                if (v.id != curID) {
                    $(v).children("option[value="+curr+"]").css("visibility","visible");
                    $(v).children("option[value="+chosen+"]").css("visibility","hidden");
                }
            })
            $(this).data('curr', chosen);
        })
        
        $("#btnReset").click(function() {
            $("option").css("visibility","visible");
            this.form.reset();
        })
    })
</script>
</head>
<body>
<form>
<?php
for ($i=0; $i<5; $i++) {
    echo "<select class='sel' id='sel$i' name='sel$i' data-curr='0'>
        <option value=''>---</option>";
    for ($j=1; $j<=5; $j++) {
        echo "<option value='$j'>$j</option>";
    }
    echo "</select> ";
}


?>
<input type='button' name='btnReset' id='btnReset' value='Reset'>
</form>
</body>
</html>

Abscooters · November 7, 2014

Thanks again Barand, that works in IE, FF and chrome.

Doesn't work in opera, but not many of them users only, just flag a browser warning

I have a mobile version, should I change visibility to display for that?

I wish they all handled js the same.

Abscooters · November 7, 2014

I knew about the repopulating problem, that is why I asked for a reset button. It is all better than what I had before.

Barand · November 7, 2014

It still isn't right. Apparently you can still select a hidden option! Need to enable/disable them instead with

.attr("disabled",false)
.attr("disabled",true)

Abscooters · November 8, 2014

Oh I really like the last way, that works excellent. Thank you!!

It still shows the disabled values, that is cool. IS there a way to highlight either the selected or unselected with

removeClass('highlight') or addClass('highlight')

I had text input with onblur verification before, which still allowed duplicates to be submitted, this works so much better.

Barand · November 8, 2014

yes

<html>
<head>
<title>Sample</title>
<style type="text/css">
.highlight {
    color: #fff;
    background-color: #888;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    $().ready(function() {
        $(".sel").change(function() {
            var curID = $(this).attr("id");
            var chosen = $(this).val();
            var curr = $(this).data('curr');
            $(".sel").each(function(i,v) {
                if (v.id != curID) {
                    $(v).children("option[value="+curr+"]").attr("disabled",false).removeClass("highlight");
                    $(v).children("option[value="+chosen+"]").attr("disabled",true).addClass("highlight");
                }
            })
            $(this).data('curr', chosen);
        })
        
        $("#btnReset").click(function() {
            $("option").attr("disabled",false).removeClass("highlight");
            this.form.reset();
        })
    })
</script>
</head>
<body>
<form>
<?php
for ($i=0; $i<5; $i++) {
    echo "<select class='sel' id='sel$i' name='sel$i' data-curr='0'>
        <option value=''>---</option>";
    for ($j=1; $j<=5; $j++) {
        echo "<option value='$j'>$j</option>";
    }
    echo "</select> ";
}

?>
<input type='button' name='btnReset' id='btnReset' value='Reset'>
</form>
</body>
</html>

Abscooters · November 8, 2014

Thank you again.

Psycho · November 12, 2014

Sorry to say, there are still a couple bugs bug. I was able to select the same value twice one time and I'm also able to "disable" the unselected value - "--".

Not sure about the first one as I was only able to get it to occur one time. But, for the second issue, if you select a number, then select the "no selection" value ("--"). Then, any other select list with a number already selected will set the "--" option to disabled. That option should never be disabled. I think this resolves that. I moved the code to re-enable the previously selected value in other select lists outside the if() condition. Then I added an additional check in that if() condition to only diasable the currently selected value in other select lists if it is not the empty value.

<script type="text/javascript">
    $().ready(function() {
        $(".sel").change(function() {
            var curID = $(this).attr("id");
            var chosen = $(this).val();
            var curr = $(this).data('curr');
            //Itterate over each select list
            $(".sel").each(function(i,v) {
                //Set child for the "prev" selected value to enabled
                $(v).children("option[value="+curr+"]").attr("disabled", false).removeClass("highlight");
                if (v.id != curID && chosen) {
 
                    //Set child for current selected value to disabled
                    $(v).children("option[value="+chosen+"]").attr("disabled", true).addClass("highlight");
                }
            })
            $(this).data('curr', chosen);
        })
        
        $("#btnReset").click(function() {
            $("option").attr("disabled",false).removeClass("highlight");
            this.form.reset();
        })
    })
</script>

Edited November 12, 2014 by Psycho

Sign In

Inter Dependant select fields

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information