Question

我有一个三层下拉搜索相互依赖。一切正常，但我希望将其中三个放在同一页面上。我已经重命名了三次搜索的每个元素ID，但只搜索了第三个下拉列表。点击搜索“＃”之后的前两次下拉搜索是在我理解为什么会这样做的网址之后但是是一段代码或者其他任何内容可以让我们搜索三个下拉列表。一个例子是www.findcarparts.ie在页面上有三个工作搜索。下面是我正在处理的代码示例：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
    </head>
    <script type="text/javascript">
        var statesx = new Array();
        statesx['Please Select a County'] = new Array('Please Select a County');
        statesx['Antrim'] = new Array('Belfast');
        statesx['Armagh'] = new Array('Armagh');
        statesx['Carlow'] = new Array('Carlow Town');


        // Cityx lists
        var citiesx = new Array();

        citiesx['Please Select a County'] = new Array();
        citiesx['Please Select a County']['Please Select a County'] = new Array('Please Select a County');
        citiesx['Please Select a County']['Please Select a Countylinks'] = new Array('#');

        citiesx['Antrim'] = new Array();
        citiesx['Antrim']['Belfast'] = new Array('Optional', 'Trailer Accessories', 'Winter Products');
        citiesx['Antrim']['Belfastlinks'] = new Array('http://www.google.com', 'http://www.google.ie', 'http://www.google.com');

        citiesx['Armagh'] = new Array();
        citiesx['Armagh']['Armagh'] = new Array('Optional', 'Trailer Accessories', 'Winter Products');
        citiesx['Armagh']['Armaghlinks'] = new Array('http://www.google.com', 'http://www.google.ie', 'http://www.google.com');

        citiesx['Carlow'] = new Array();
        citiesx['Carlow']['Carlow Town'] = new Array('Optional', 'Trailer Accessories', 'Winter Products');
        citiesx['Carlow']['Carlow Townlinks'] = new Array('http://www.google.com', 'http://www.google.ie', 'http://www.google.com');


        function setStatesx() {
            cntrySel = document.getElementById('countyx');
            statexList = statesx[cntrySel.value];
            changeSelect('statex', statexList, statexList);
            setCitiesx();
        }
        function setCitiesx() {
            cntrySel = document.getElementById('countyx');
            statexSel = document.getElementById('statex');
            cityxList = citiesx[cntrySel.value][statexSel.value];
            cityxLinksList = citiesx[cntrySel.value][statexSel.value + "links"];
            changeSelect('cityx', cityxList, cityxLinksList);
        }
        function changeSelect(fieldID, newOptions, newValues) {
            selectField = document.getElementById(fieldID);
            selectField.options.length = 0;
            for (i = 0; i < newOptions.length; i++) {
                selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
            }
        }
        // Multiple onload function created by: Simon Willison
        // http://simonwillison.net/2004/May/26/addLoadEvent/
        function addLoadEvent(func) {
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
                window.onload = function () {
                    if (oldonload) {
                        oldonload();
                    }
                    func();
                }
            }
        }
        addLoadEvent(function () {
            setStatesx();
        });
        function redirect() {
            x = document.getElementById("cityx").value;
            window.location = x;
        }
    </script>
    <style type="text/css">
        .make_selection_back {
            background: url('Header_Looking_Image.jpg') no-repeat;
            width: 1160px;
            height: 245px;
            position: relative;
        }

        .make_selection_table {
            position: absolute;
            top: 170px;
            left: 505px;
        }
    </style>
    <body>
        <div id="points-table" class"rounded shadow">
            <form>
                <table border="0">
                    <tr>
                        <td><font color="red">County:</font></td>
                        <td>
                            <select name="countyx" id="countyx" onchange="setStatesx();">
                                <option value="Please Select a County">Please Select a County</option>
                                <option value="Antrim">Antrim</option>
                                <option value="Armagh">Armagh</option>
                                <option value="Carlow">Carlow</option>
                            </select>&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">Town:</font></td>
                        <td>
                            <select name="statex" id="statex" onchange="setCitiesx();">
                                <option value="">Please select a County</option>
                            </select>&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td><font color="red">Manufacturer:</font></td>
                        <td>
                            <select name="cityx" id="cityx">
                                <option value="">Please select a County</option>
                            </select>&nbsp;&nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><input type="button" name="submit_form" value="Search" onclick="redirect();" /></td>
                    </tr>
                </table>
            </form>
        </div><!--//make_selection_back-->

    </body>
</html>

Javascript下拉搜索

0 个答案: