Jump to content

Inter Dependant select fields

Abscooters

By Abscooters
in Javascript Help

 Share

Recommended Posts

Abscooters Newbie

Abscooters

Posted
Posted

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?

 

 

 

 

 

 

 

Link to comment
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

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>
Link to comment
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

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>
Link to comment
Share on other sites
Abscooters Newbie

Abscooters

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

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>
Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted (edited)

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 by Psycho
Link to comment
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

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>
Link to comment
Share on other sites
Abscooters Newbie

Abscooters

Posted
  • Author
Posted

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.

Link to comment
Share on other sites
Barand Prolific Member

Barand

Posted
Posted

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>
Link to comment
Share on other sites
Psycho Prolific Member

Psycho

Posted
Posted (edited)

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 by Psycho
Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.