HTML/Javascript设置了两个选择选项，并在选择第一个选项后重定向

这就是我的全部。基本上，我想要的是当有人在第一个下拉菜单上选择一个选项，比如选项1，它就会拉出一组特定的选项。例如，如果有人在第一个下拉菜单上选择了选项1，那么在第二个下拉菜单上会出现选项1 2 3，但是如果有人在第一个下拉菜单上选择了选项2，会出现菜单选项4 5 6。我还想知道如何设置一个搜索按钮，这样当两个下拉菜单都选择了一组特定的选项时，它就会重定向到我设置的特定页面。对这一切感到抱歉。。我知道我不是很好

你要找的是链式选择框-你可以使用Jquery轻松更改选项值，但最好选择一个提供此功能的插件：

例如：

或者，如果您正在使用数据库MySQL和PHP来提供选择框的内容，请参见此处

---

您需要在第一个文本框上创建一个事件处理程序，用选项填充第二个文本框。这样做的一个好方法是将选项存储在2D数组中，因此当选择第一个选择框时，Javascript代码可以轻松循环并创建新选项

像这样的HTML

<select id="First DropDown" name="" onchange="javascript:location.href = this.value;">
   <option value="/url">Option1</option>
   <option value="/url">Option2</option>
   <option value="/url">Option3</option>
   <option value="/url>Option4</option>
   <option value="" selected="selected">Option5</option>'
</select>
 <select id="Second DropDown" name="" onchange="javascript:location.href = this.value;">
       <option value="/url">Option1</option>
       <option value="/url">Option2</option>
       <option value="/url">Option3</option>
       <option value="/url>Option4</option>
       <option value="" selected="selected">Option5</option>'
    </select>

Javascript是这样的：

<!-- In your own code, do not use onsubmit="return false" -->
<form id="searchForm" action="#" onsubmit="return false">
    <input type="text" name="search" value="Search a little"/>
    <fieldset>
        <label>Search parameters</label>
        <select id="first" name="first"></select>
         <select id="second" name="second">
             <option>-----</option>
        </select>
    </fieldset>
    <input type="submit" value="Search" />
</form>

您可以根据用户从下拉列表中选择的选项更改表单的位置

---

为了让自己开始

我宁愿用一个物体来固定它，但我想两者都能起作用。很好的一段代码。只是想知道，为什么要在addEventListener中将updateFormAction包装到second中的匿名函数中？我知道传递参数很有用，但这里有什么用途？你也可以通过一些调整使用对象！我从两个事件处理程序调用updateFormAction。这防止了我的代码被复制：在本例中，我想在两个地方做同样的事情，更新表单操作，因此我为它创建一个函数，而不是复制粘贴。不确定您是否理解我的意思，因此我将澄清：为什么是第二个。addEventListener'change'，函数{updateFormAction；}，false；而不是第二个。addEventListener'change'，updateFormAction，false？顺便说一句，对于传统浏览器的支持，通常会明确指出错误。我现在明白你的意思了，这可能更有效。我只是习惯于编写匿名函数事件处理程序，我想：P@cvializ我知道这听起来会非常新鲜。但是如何更改这两个下拉列表的文本？我希望它是完全不同的文本，而不是变化的值。此外，我如何设置它，以便当它单击submit时，它针对每一组选择转到不同的url？

var options = [
    ["A","B","C"],
    ["D","E","F"],
    ["G","H","I"],
    ["J","K","L"]
],
first = document.getElementById('first'),
second = document.getElementById('second'),
searchForm = document.getElementById('searchForm'),
searchButton = document.querySelector('input[type="submit"]'),
destination,
option;

// Fill the second text box with options from the array.
function fillSecond() {
    // Get the list of options
    var secondOptions = options[first.value];
    // Clear the previous options
    second.innerHTML = '';
    // Add each option to the select box    
    for (var i = 0; i < options[first.value].length; i++) {
        option = document.createElement('option');
        option.value = secondOptions[i];
        option.innerHTML = 'Option ' + secondOptions[i];
        second.appendChild(option);
    }
    // Select the first option by default.
    second.firstElementChild.setAttribute('selected','selected');

    // update the from 
    updateFormAction();
};

function updateFormAction() {
    searchForm.action = destination = '#' + first.value + second.value;
}

// When the second box is updated, update the second select
// and update the form action
first.addEventListener('change', fillSecond);

// Fill the first select box with options
for (var i = 0; i < options.length; i++) {
    option = document.createElement('option');
    option.value = i;
    option.innerHTML = 'Option ' + i;

    first.appendChild(option);
}
// By default select the first element.
first.firstElementChild.setAttribute('selected','selected');

// When search is clicked, alert where the form will take them
searchButton.addEventListener('click', function () {
    alert('Sending user to location: ' + destination);
    return false;
});

// When the second box is updated, update the form action
second.addEventListener('change', function () {
    updateFormAction();
});

// On startup, fill the second box.
fillSecond();