#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2010
    Posts
    195
    Rep Power
    45

    Ajax: Remove option from other dropdowns when selected


    Hi all,

    I've tried finding this in Google, but I don't really know what I'm asking for, so it makes it hard for me to find what I want. I've found lots about dynamically creating dropdowns, but that is not really what I'm trying to accomplish.

    Here's what I'm looking to do (this is just a simplified example). Let's say I have a list of 4 colors. I also have 4 dropdown <select> fields. By default, each of these dropdowns is automatically populated with all 4 colors as possible selections. Once one of the colors is selected in the first dropdown, the remaining 3 dropdowns are updated to only allow a selection from the 3 remaining unselected color options. By the time you arrive at the 4th and final dropdown, only one option remains, and is selected automatically.

    The number of dropdowns is dynamic, and is based on the number of available colors stored in the MySQL database. The number of dropdowns (for this use) is equal to number of result rows in a query. However, if possible, I would also like to know how to do this so the list of available choices may be longer than the number of dropdowns. I'm pretty sure this is just managed on the PHP side, and won't have any implication on how the Ajax script works, but I thought I'd request the flexibility just in case.

    Hopefully I've given you enough to go on. I know so very little about Ajax that I can describe what I want, but am much more comfortable in a server-side world. Or maybe it's not Ajax at all, maybe there is a way to do this in jQuery instead?

    Appreciate any help you can lend!
    Last edited by BlackAce; May 14th, 2013 at 05:00 PM.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Assuming this is what your trying to do; here's how I would do it with jQuery:
    Code:
    <style>
    #selMenus select, #selMenus input[type=submit] {
    display:none;
    }
    </style>
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $("document").ready(function(){
    
    $("#selMenus input:submit").click(function(){
       document.location.href = "?color1=" + $("#selMenus select[name='color1']").val() + "&color2=" + $("#selMenus select[name='color2']").val() + "&color3=" + $("#selMenus select[name='color3']").val() + "&color4=" + $("#selMenus select[name='color4']").val();
       return false;
    });
    
    var max = $("#selMenus select").length;
    $("#selMenus select").change(function(){
     var thisIndex = $(this).index();
     var myVal = $(this).val();
       $("#selMenus select option[value='"+myVal+"']").each(function(){
          $("#selMenus select option[value='"+myVal+"']").not(":selected").remove();
       });
          $(this).attr("disabled","disabled");
          $(this).next().css("display","inline-block");
         
         if($("#selMenus select:last").css("display") == "inline-block") {
          $("#selMenus input[type='submit']").css("display","inline-block");
         }
    
     });
    
        $("#selMenus select:first").css("display","inline-block");
    
    });
    </script>
    
    <div id="selMenus">
    
    <form>
    
    <select name="color1">
    <option selected>Select A Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="white">White</option>
    </select>
    
    <select name="color2">
    <option selected>Select A Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="white">White</option>
    </select>
    
    <select name="color3">
    <option selected>Select A Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="white">White</option>
    </select>
    
    <select name="color4">
    <option selected>Select A Color</option>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="white">White</option>
    </select>
    
    <input type="submit"/>
    
    </form>
    
    </div>

IMN logo majestic logo threadwatch logo seochat tools logo