链接二选择表单元素

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

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>

不要在onchange事件中传递任何值。然后像这样修改你的脚本

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

在get_products.php文件中编写代码获取特定品类的产品

你应该写一个js或jquery函数，它将在选择选项的值改变时调用，在这个函数中你可以做适当的动作，比如在第二个选择中隐藏几个元素，或者你可以调用从DB获取相关数据并填充第二个选择。