Javascript 双动态下拉列表

我正在为我的数据库制作一个“搜索引擎”，并通过使用下拉列表作为值来限制查询，这样就不会进行错误的搜索。简而言之，将根据列和值进行搜索。在这个问题上，我已经将列的数量减少到了三列，好像你可以帮助我完成工作2，那么希望我能理解自己做得更多

第一个下拉列表（列），对应的下拉列表和新选项（值）。 第二个下拉列表（列），对应的下拉列表和新选项（值）

实际上，第一个和第二个下拉查询具有相同的列名，因为我们希望同时匹配两个查询

当前代码：第一个已经是一个下拉列表，它工作得很好。然而，我尝试了很多使第二个成为下拉菜单（这很容易），但后来使它像第一个一样工作，它没有成功

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

如果您能帮助我，我将不胜感激。如果您需要任何其他信息，请告诉我

var选项={
“船运线”：[
{文本：“MSC”，值：“MSC”}，
{文本：“第一选择-选项二”，值：“一对二”}
],
“POL”：[
{文本：“香港”，价值：“香港”}，
{文字：“上海”，价值：“上海”}
],
“吊舱”：[
{文本：“汉堡”，值：“汉堡”}，
{文本：“勒阿弗尔”，值：“勒阿弗尔”}
]
}
功能更改其他（sel）{
var selbox=document.getElementById（“find”+sel.id.replace（“field”，”）；
console.log（selbox.id）
selbox.options.length=0；
var val=选择值；
如果（val==“”）{
selbox.options[selbox.options.length]=新选项（'请先选择左边的选项之一'，''）；
返回；
}
对于（var opt=opts[val]，i=0；i当前我的代码正在运行，它是一个下拉菜单，带有条件下拉菜单（例如，选择：SHIPPING LINE，然后在条件下拉菜单中，您可以选择MSC或first choice-选项二）。下一个（字段二）目前是一个文本字段，我希望这个下拉列表与fieldone完全相同。我不知道如何更好地解释它。如果需要更多详细信息，请告诉我？：）谢谢你的回复。顺便说一句，在你的小提琴中，你做对了，这就是现在的情况。我想要的是文本字段也是一个下拉列表，就像第一个一样。我自己尝试做的时候遇到的问题是，第一个字段的值与第二个字段的值在某种程度上混淆了，无论我如何设置条件。：）我做了一个小提琴也许这会让我更清楚地了解我试图实现的目标。那么第三个下拉列表的值是什么？如果我在第二个下拉列表中选择HAMBURG，我想您需要一些选项？在您的小提琴中，您只需重复选择。您能修改它以显示您需要的实际HTML吗？目标是将从SQL数据库获取的数据与来自两个数据库的值相匹配不同的列，以匹配数据。例如，在第一个下拉列表中，我将选择POL:SHANGHAI。在第二个下拉列表中，我将选择POD，然后选择HAMBURG。因为我的SQL是：$data=mysql\u query（“从tablename中选择*，上面（$fieldone）像“%$findone%”，上面（$fieldtwo）像“%$findtwo%”）；它将匹配数据并根据这些下拉列表获取。再次感谢您的帮助：），如果您需要更多信息，请告诉我！
<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>

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

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