基於另一個下拉列表的選擇來顯示/隱藏下拉列表

是的，我試着搜索這個問題的答案，我發現了很多類似的問題，但他們沒有一個似乎幫助我。基於另一個下拉列表的選擇來顯示/隱藏下拉列表

我有幾個選項下拉列表，當用戶選擇一個選項，另一個下拉列表出現正確的選擇。是的，這很簡單，但我需要將選定的選項發送給服務器，這對我來說是非常棘手的部分。在用戶從「主」下拉列表中選擇了一個選項後，我創建了兩個不同的下拉列表。問題是，只有從彈出的第一個列表中，正確的值纔會進入服務器。如果我從彈出的第二個列表中選擇值，則第一個列表的第一個選項將轉到服務器。

這裏是我的代碼：

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
.hiddenMenu {display: none;} 
.visibleMenu {display: inline;} 
</style> 
<script type="text/javascript"> 
var lastDiv = ""; 
function showDiv(divName) { 
    // hide last div 
    if (lastDiv) { 
     document.getElementById(lastDiv).className = "hiddenMenu"; 
    } 
    //if value of the box is not nothing and an object with that name exists, then change the class 
    if (divName && document.getElementById(divName)) { 
     document.getElementById(divName).className = "visibleMenu"; 
     lastDiv = divName; 
    } 
} 
</script> 
</head> 
<body> 
<form action="http://url.here" method="post" enctype="multipart/form-data"> 
    <label for="shirttype">T-shirt </label> 
    <select name="category" id="shirttype" onchange="showDiv(this.value);"> 
     <option value="">Choose type&hellip;</option> 
     <option value="female">Female</option> 
     <option value="male">Male</option> 
    </select> 
    <br/> 
    <p id="female" class="hiddenMenu"> 
    <label for="shirtsizefemale">Size </label> 
    <select name="subjectCategory" id="shirtsizefemale"> 
     <option value="femaleXS">XS</option> 
     <option value="femaleS">S</option> 
    </select> 
    </p> 
    <p id="male" class="hiddenMenu"> 
    <label for="shirtsizemale">Size </label> 
    <select name="subjectCategory" id="shirtsizemale"> 
     <option value="maleXS">XS</option> 
      <option value="maleS">S</option> 
    </select> 
    </p> 
    <br/> 
<input type="submit" value="Upload"> 
</form> 
</body> 
</html>

所以，如果我選擇男性s到我的襯衫。我在服務器中收到「femaleXS」值。但是，如果我選擇女性S作爲我的襯衫，價值就會正確地服務器。只有第一個彈出列表中的值正確到服務器。

好吧，然後我決定只彈出一個列表，這個列表將包含所有選項。根據用戶選擇的襯衫類型，我會隱藏錯誤的選項。問題是，我用完JS技能:)我使用的這個JS代碼從here得到。

幫幫我。我想一個下拉隱藏值列表將是最好的選擇，但我只是不知道如何做到這一點：P

來源

2011-08-09 nqw1

你願意使用像jQuery這樣的JavaScript庫嗎？它會讓你的生活變得非常容易。此外，Knockout.js主要是爲此目的而定義的。 – ghayes

使用像jQuery這樣的JS庫很好，並且感謝關於Knockout.js的提示。 – nqw1

JavaScript代碼可能是簡單了很多，但只回答你的問題補充：

document.getElementById('shirtsize' + lastDiv).disabled = true;

後：

document.getElementById(lastDiv).className = "hiddenMenu";

並添加：

document.getElementById('shirtsize' + divName).disabled = false;

後：

document.getElementById(divName).className = "visibleMenu";

然後爲兩個隱藏的選擇標記添加禁用。

像：

<select name="subjectCategory" id="shirtsizemale" disabled>

禁用意味着它不會被髮送到服務器。

來源

2011-08-09 08:01:22 Ariel

非常感謝！這解決了我的問題。如果你感到無聊，請不要猶豫，以簡化我使用的JS代碼：P – nqw1

基於另一個下拉列表的選擇來顯示/隱藏下拉列表

回答

相關問題