Question

我正在为我的数据库创建一个'搜索引擎'，我通过使用下拉列表作为值来限制查询，因此不会进行错误的搜索。简而言之，搜索将基于列和值完成。在这个问题中，我已经将列数减少到三个，好像你可以帮助我完成工作2，然后希望我能理解为自己做更多。

第一个下拉列（列），使用新选项（值）的相应下拉列表。第二个下拉列（列），使用新选项（值）的相应下拉列表。

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

当前代码：第一个是下拉列表，它完美无缺。但是，我尝试了很多让第二个下拉（这很容易），但是然后让它像第一个一样工作，它没有成功。

<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

DEMO

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

双动态下拉列表

1 个答案: