Link Two select form elements

Question

Can someone help me here I want this two elements two work together if I select one category it should give me narrowed down options

For example if I select fashion it should give me things related to fashion in the other select element

 <label>Product Type:<span>*</span></label><br/> <select name="type"> <option value="Shoes">Shoes</option> <option value="Bing">Bing</option> <option value="Yahoo">Yahoo</opton> </select> <label>Product Category:<span>*</span></label><br/> <select name="Category"> <option value="Fashion">Fashion</option> <option value="Children">Children</option> <option value="Stationery &amp; Books">Stationery &amp; Books</option> <option value="Gifts">Gifts</option> <option value="Bags">Bags</option> <option value="Outdoor &amp; Garden">Stationery &amp; Books</option> <option value="Home">Home</option> </select> 

Answer 1

 <script type="text/javascript"> //<![CDATA[ // array of possible countries in the same order as they appear in the country selection list var TypeLists = new Array(7) TypeLists["empty"] = ["Select a Country"]; TypeLists["Fashion"] = ["Clothing", "Shoes", "Jewellery", "Bags", "Accessories"]; TypeLists["Children"] = ["Clothing", "Jewellery", "Toys", "Gifts", "Bags", "Bedroom", "Furniture", "Pictures", "Books", "Accessories"]; TypeLists["Home"] = ["Food", "Bathroom", "Kitchen", "Dining", "Liveroom", "Pictures", "Displays", "Beanbags", "Accessories", "Cushion", "Lighting", "Bedroom", "Decoration"]; TypeLists["Gifts"] = ["Jewellery", "Books", "Stationery", "Pictures", "Frames"]; TypeLists["Bags"]= ["Ladies", "Mens", "Travel", "School", "Children", "Accessories"]; TypeLists["Stationery Books"]= ["Books", "Wrapping Paper", "Cards", "Pens", "Notebooks", "Ribbon"]; TypeLists["Outdoor Gardens"]= ["Furniture", "Plants", "Accessories", "Decorations"]; /* CategoryChange() is called from the onchange event of a select element. * param selectObj - the select object which fired the on change event. */ function CategoryChange(selectObj) { // get the index of the selected option var idx = selectObj.selectedIndex; // get the value of the selected option var which = selectObj.options[idx].value; // use the selected option value to retrieve the list of items from the CategoryLists array cList = TypeLists[which]; // get the Type select element via its known id var cSelect = document.getElementById("Type"); // remove the current options from the Type select var len=cSelect.options.length; while (cSelect.options.length > 0) { cSelect.remove(0); } var newOption; // create new options for (var i=0; i<cList.length; i++) { newOption = document.createElement("option"); newOption.value = cList[i]; // assumes option string and value are the same newOption.text=cList[i]; // add the new option try { cSelect.add(newOption); // this will fail in DOM browsers but is needed for IE } catch (e) { cSelect.appendChild(newOption); } } } //]]> </script> 

  <noscript>This page requires JavaScript be available and enabled to function properly</noscript> <h1>Dynamic Select Statements</h1> <label for="Category">Select Category</label> <select id="Category" onchange="CategoryChange(this);"> <option value="empty">Select a Continent</option> <option value="Fashion">Fashion</option> <option value="Children">Children</option> <option value="Home">Home</option> <option value="Gifts">Gifts</option> <option value="Bags">Bags</option> <option value="Stationery Books"> Stationery &amp; Books</option> <option value="Outdoor Gardens">Outdoor &amp; Gardens</option> </select> <br/> <label for="Type">Type</label> <select id="Type"> <option value="0">Select a Type</option> </select> 

Answer 2

您应该编写一个js或jquery函数，该函数将在select选项的值更改时被调用，在此函数中，您可以执行适当的操作，例如在第二个select中隐藏一些元素，或者可以调用从数据库中获取相关数据并填充第二选择。

Answer 3

change

    <select name="Category" id="Category" onchange="getState()">
        <option value="Fashion">Fashion</option>
        <option value="Children">Children</option>
        <option value="Stationery &amp; Books">Stationery &amp; Books</option>
        <option value="Gifts">Gifts</option>
        <option value="Bags">Bags</option>
        <option value="Outdoor &amp; Garden">Stationery &amp; Books</option>
        <option value="Home">Home</option>
    </select>

donot pass any value in onchange event. And change your script like this

<script>
function getState(val) {
    var category = $("#Category").val();
    if(category && div) {
        $.ajax({
            type: "POST",
            url: "get_products.php",
            data:{"category": category},
            success: function(data){
                $("#product-list").val(data);//producy-list is the id of another drop down.
             }
        }); 
    }
}
</script>

in get_products.php file write code to get products of particular category.