基於首次下拉選擇值的多下拉菜單

Question

我一直在尋找類似的問題，但它們與我正在尋找的有點不同。

基本上，這是我的目標：

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

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

然后，在第二個下拉列表中，顯示取決於所選內容的選項，例如，如果選擇了代理，則運算符將為=或!=因為它是文本。 對於fileversion，將有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);
}

});
});

Answer 1

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

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

偽代碼應該是這樣的

Answer 2

嘗試這樣的東西，一個數據對象填充相應的數據..

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>");
  }
}

基於首次下拉選擇值的多下拉菜單

問題描述

2 個解決方案

解決方案1
1 2011-03-23 13:09:51

解決方案2
1 已采納 2011-03-23 13:12:02

基於首次下拉選擇值的多下拉菜單

問題描述

2 個解決方案

解決方案1 1 2011-03-23 13:09:51

解決方案2 1 已采納 2011-03-23 13:12:02

解決方案1
1 2011-03-23 13:09:51

解決方案2
1 已采納 2011-03-23 13:12:02