Question

这是我的代码：

<script type="text/javascript">
    function goToNewPage ()
    {
        var url = document.getElementById('list').value;
        if(url != 'none') {
            window.location = url;
            }
    }
</script>
</head>
<body> 
<header>
<nav>
<a href="gems.html">
    <img src="gems-logo.png" alt="Gems Logo" height="120" width="150">
</a>
<ul>
    <li><a href="gems.html">Home</a></li>
<select name="list" id="list" accesskey="target">
    <option value='none' selected></option>
    <option value="available-services.html">Available Services</option>
    <option value="construction.html">Construction Cleaning</option>
    <option value="maintenance.html">Maintenance Cleaning</option>
    <option value="residential.html">Residential Cleaning</option>
    <option value="office.html">Office Cleaning</option>
    </select>
<input type=button value="Go" onclick="goToNewPage()" />
<select name="drop" id="drop" accesskey="target">
    <option value='none' selected></option>
    <option value="about-gems.html">About Gems</option>
    <option value="spring-fall.html">Spring/Fall Information</option>
    <option value="application.html">Apply</option>
    <option value="pricing.html">Pricing</option>
    <option value="contact-us.html">Contact Us</option>
    </select>
<input type=button value="Go" onclick="goToNewPage()" />

</ul>
</nav>
</header>

记事本++中的两个按钮类型为黄色，第一个下拉列表有效，但第二个按钮类型允许我选择一个选项，但按钮不允许我转到我选择的页面。我已经尝试重命名按钮并重命名代码中的按钮，例如button1，但所有给我的是一种搜索栏。

Answer 1

Right, I have sorted it for you but you are trying to do something you cannot do.

As I said, your dropdowns cannot have the same ID as any other element in the DOM or JS cannot find it.
Having two buttons call the same function expecting them to do different things is mental.

I have provided a modified version of your code below that works.

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            var goToNewPage1 = function()
            {
                var url = document.getElementById('list1').value;
                if(url != 'none') {
                    window.location = url;
                }
            }

            var goToNewPage2 = function()
            {
                var url = document.getElementById('list2').value;
                if(url != 'none') {
                    window.location = url;
                }
            }
        </script>
    </head>
    <body>
        <header>
            <nav>
                <a href="gems.html">
                    <img src="gems-logo.png" alt="Gems Logo" height="120" width="150">
                </a>
                <ul>
                    <li><a href="gems.html">Home</a></li>
                </ul>
                <select name="list1" id="list1" accesskey="target">
                    <option value="none" selected=""></option>
                    <option value="available-services.html">Available Services</option>
                    <option value="construction.html">Construction Cleaning</option>
                    <option value="maintenance.html">Maintenance Cleaning</option>
                    <option value="residential.html">Residential Cleaning</option>
                    <option value="office.html">Office Cleaning</option>
                </select>
                <input type="button" value="Go" onclick="goToNewPage()">
                <select name="list2" id="list2" accesskey="target">
                    <option value="none" selected=""></option>
                    <option value="about-gems.html">About Gems</option>
                    <option value="spring-fall.html">Spring/Fall Information</option>
                    <option value="application.html">Apply</option>
                    <option value="pricing.html">Pricing</option>
                    <option value="contact-us.html">Contact Us</option>
                </select>
                <input type="button" value="Go" onclick="goToNewPage()">
            </nav>
        </header>
    </body>
</html>

我的第二个下拉列表没有工作

1 个答案: