链接两个选择表单元素

Question

有人可以帮助我在这里，我想这两个元素两人携手如果我选择一个类别就应该给我缩小了选择

例如，如果我选择的方式也应该给我相关的事情时尚中的其他选择元素

<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> 
 
\t \t \t \t <option value="Home">Home</option> 
 

 
        
 
        </select>

Answer 1

变化

<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在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文件编写代码来获得特定类别的产品。

Answer 2

你应该写一个js或jquery的功能，这将在选择期权的价值变化，并在此功能，你可以做被称为在第二个选择中隐藏少量元素的适当操作，或者您可以调用从数据库中获取相关数据并填充第二个选择。

Answer 3

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