链接两个选择表单元素

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>

</div>

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.

you should write a js or a jquery function which will be called on the value change of select option and in this function you can do the appropriate action like hiding few elements in the second select or you can call fetch relevant data from the DB and fill the second select.

<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>

</div>