雙動態下拉列表

Question

我正在為數據庫創建一個“搜索引擎”，並且通過使用下拉列表作為值來限制查詢，因此不會進行錯誤的搜索。 簡而言之，將根據列和值進行搜索。 在這個問題中，我已將列的數量減少到三個，好像您可以幫助我做第二個工作一樣，那么我希望自己能做得更多。

第一個下拉列表（列），帶有新選項（值）的相應下拉列表。 第二個下拉列表（列），帶有新選項（值）的相應下拉列表。

實際上，第一個和第二個下拉查詢具有相同的列名，因為我們想同時匹配兩個查詢。

當前代碼：第一個已經是下拉列表，並且可以正常運行。 但是，我做了很多嘗試，以使第二個成為下拉菜單（這很容易），但隨后使其像第一個一樣工作，但沒有成功。

<script type="text/javascript">
    function setOptions(chosen) {
        var selbox = document.search.findone;

        selbox.options.length = 0;
        if (chosen == " ") {
            selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' ');
        }
        if (chosen == "SHIPPINGLINE") {
            selbox.options[selbox.options.length] = new Option('MSC','MSC');
            selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
        }
        if (chosen == "POL") {
            selbox.options[selbox.options.length] = new Option('HONG KONG','HONG KONG');
            selbox.options[selbox.options.length] = new Option('SHANGHAI','SHANGHAI');
        }
        if (chosen == "POD") {
            selbox.options[selbox.options.length] = new Option('HAMBURG','HAMBURG');
            selbox.options[selbox.options.length] = new Option('LE HAVRE','LE HAVRE');
        }
    }
</script>

並進一步

<div id="searchzone">
    <h2>Search</h2>
    <form name="search" method="post" action="<?=$PHP_SELF?>">
        <Select NAME="fieldone"   onchange="setOptions(document.search.fieldone.options[document.search.fieldone.selectedInde    x].value);" id="fieldone">
            <option value=" " selected="selected"> </option>
            <option VALUE="SHIPPINGLINE">SHIPPING LINE</option>
            <option VALUE="POL">POL</option>
            <option VALUE="POD">POD</option>
        </Select>
        <Select NAME="findone" />

        <option value=" " selected="selected">Please select the category on the left first.</option>
        </select>

    <br />
    <br />
        <Select NAME="fieldtwo">
            <option VALUE="SHIPPINGLINE">SHIPPING LINE</option>
            <option VALUE="POL">POL</option>
            <option VALUE="POD">POD</option>
        </Select>
        <input type="text" name="findtwo" />
        <input type="hidden" name="searching" value="yes" />
        <input type="submit" name="search" value="Search" />
    </form>
</div>

也許與您知道有關，這是我的sql查詢，它工作正常:)

$data = mysql_query("SELECT * FROM tablename WHERE upper($fieldone) LIKE'%$findone%' AND upper($fieldtwo) LIKE'%$findtwo%'"); 

如果您能幫助我，我將不勝感激，如果您需要任何其他信息，請告訴我！

Answer 1

演示

var opts = {
    "SHIPPINGLINE":[
        {text:"MSC",value:"MSC"},
        {text:"first choice - option two",value:"onetwo"}
        ],
    "POL":[
        { text:"HONG KONG",value:"HONGKONG"},
        { text:"SHANGHAI", value:"SHANGHAI"}
       ],
    "POD":[
        { text:"HAMBURG",value:"HAMBURG"},
        { text:"LE HAVRE", value:"LE HAVRE"}
       ]

}

function changeOther(sel) {
    var selbox = document.getElementById("find"+sel.id.replace("field",""));
    console.log(selbox.id)
      selbox.options.length = 0;
      var val = sel.value;
      if (val=="") {
        selbox.options[selbox.options.length] = new Option('Please select one of the options to the left first','');
        return;
      }
      for (var opt = opts[val],i=0; i<opt.length;i++) {
         selbox.options[selbox.options.length] = new Option(opt[i].text,opt[i].value);
      }

}

window.onload=function() {
    document.getElementById("fieldone").onchange=document.getElementById("fieldtwo").onchange=function() {
        changeOther(this);
   }      
}