基於第一下拉選定值的多個下拉菜單

我一直在尋找類似的問題，但它們與我所尋找的有點不同。基於第一下拉選定值的多個下拉菜單

基本上，這就是我的目標來實現：

擁有一個充滿值的第一個下拉列表，例如：

<form> 
<select id="tags" name="tags"> 
<option value="agent" selected="selected">agent</option> 
<option value="extension">extension</option> 
<option value="fileversion" >fileversion</option> 
<option value="pages">pages</option> 
</select>

然後，在第二個下拉列表，取決於選擇什麼顯示選項，例如，如果選擇代理，運營商將=或!=，因爲它是文本。對於文件版本，將有4個操作數，=,!=,>和<。

最後，會有第三個下拉菜單，其值也取決於最初選擇的選項。

例如，被選擇劑時，該選項將是pdf，word，excel，ppt等和其他這純粹是一個text box在類型，而不是排氣所有可能的值。

最後這將用於搜索數據庫，但它是一個大的分貝，搜索速度太慢，所以我想這些選項的值將存儲在一個數組中，而不是直接拉取。你可以看到，這相當棘手：/任何幫助都非常感謝。

感謝，馬丁

編輯：

找到了答案，對於那些誰碰巧尋找相同的答案：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title></title> 
<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="js/dropdown.js"></script> 
</head> 
<body> 
<form> 
<select id="tags" name="tags"> 
<option value="tags" selected="selected">tags</option> 
<option value="agent">agent</option> 
<option value="extension">extension</option> 
</select> 

<select name="operands"> 
<option>operands</option> 
</select> 
</form> 
</body> 
</html>

dropdown.js：

$(document).ready(function() { 
$tags = $("select[name='tags']"); 
$operands = $("select[name='operands']"); 

$tags.change(function() { 

if ($(this).val() == "agent") { 
$("select[name='operands'] option").remove(); 
$("<option>=</option>").appendTo($operands); 
$("<option>!=</option>").appendTo($operands); 
} 

if ($(this).val() == "extension") 
{ 
$("select[name='operands'] option").remove(); 
$("<option>.pdf</option>").appendTo($operands); 
$("<option>.doc</option>").appendTo($operands); 
} 

if ($(this).val() == "tags") 
{ 
$("select[name='operands'] option").remove(); 
$("<option>operands</option>").appendTo($operands); 
} 

}); 
});

來源

2011-03-23 martincarlin87

嘗試這樣的事情，充滿了對應的數據的數據對象..

var data = { 
    agent: [ 
    ["=", "!="], //values that are shown in 1st dropdown when agent is selected 
    ["a", "b"] //values that are shown in 2nd dropdown when agent is selected 
    ] 
    extension: [ 
    ["pdf", "doc"], //values that are shown in 1st dropdown when extension is selected 
    ["c", "d"] //values that are shown in 2nd dropdown when extension is selected 
    ] 
}

以及用於在HTML

<select id="tags" name="tags"> 
    <option value="agent" selected="selected">agent</option> 
    <option value="extension">extension</option> 
    <option value="fileversion" >fileversion</option> 
    <option value="pages">pages</option> 
</select> 

<select id="dropdown2" name="dropdown2"> 
</select> 

<select id="dropdown3" name="dropdown3"> 
</select>

現在聽更改標籤下拉列表並從數據對象中獲取選項（例如使用jquery）

$("#tags").change(function() { 
    setDropDown1(data[$(this).val()][0]); 
    setDropDown2(data[$(this).val()][1]); 
});

將數據傳遞給這樣的函數來創建的下拉選項

function setDropDown1(data) { 
    $("#dropdown1").html(""); //clear options 
    for (var i = 0; i < data.length; i++) { 
    $("#dropdown1").append("<option value='" + data[i] + "'>" + data[i] + "</option>"); 
    } 
}

來源

2011-03-23 13:12:02

謝謝，但下拉列表似乎沒有選擇一個值時填充。注意。我確實在HTML中將'dropdown2'和'dropdown3'更改爲'operators'和'values'，並且在JS中相同的值不完全匹配 - 可能是拼寫錯誤，但是我將setDropDown1和setDropDown2更改爲setOperators '和'setValues'以及類似的函數，'setOperators'，'＃operators'等。 – martincarlin87 2011-03-23 13:25:25

你能把代碼放在什麼地方嗎？ jsfiddle.net？我沒有測試它，但它應該像這樣工作。 – 2011-03-23 13:50:07

嗨，恢復到您發佈的代碼，只需稍作調整： http://jsfiddle.net/ydPfH/2/ – martincarlin87 2011-03-23 14:04:16

var selectionObject = { 
agent = ["=","!="], 
fileversion = ["=","!=",">","<"], 
... 
} 

$('form select#tags').click(function(){ 
comboBoxSelection = $(this).val(); 
secondDropDownvalues = selectionObject[comboBoxSelection]; 
.... 
});

在僞代碼應該是類似的東西

來源

2011-03-23 13:09:51

感謝，但你的僞代碼沒有解釋如何使用額外的下拉菜單。 – martincarlin87 2011-03-23 14:11:04

基於第一下拉選定值的多個下拉菜單

回答

相關問題