设置两个选择选项和重定向一旦第一个被选中

HTML/Javascript Set up Two Select Options and redirect once first one is selected

本文关键字：重定向 第一个 选项 选择 两个 设置      更新时间：2023-09-26
<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>

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

您需要在第一个文本框上创建一个事件处理程序，用选项填充第二个文本框。实现这一点的一个好方法是将选项存储在一个2D数组中，这样当第一个选择框被选中时，你的Javascript代码可以很容易地循环并创建新的选项。

使用像这样的HTML 

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

和Javascript:

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

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

查看这个jsFiddle的演示，让你自己开始

你正在寻找的是所谓的"Chained Select Box" -你可以很容易地用Jquery改变选项值，但你最好带一个插件提供这个功能:

例如:

http://www.appelsiini.net/projects/chained/demo.html

或者这里如果你正在使用数据库(MySQL)和PHP来提供你的选择框的内容

http://www.yourinspirationweb.com/en/how-to-create-chained-select-with-php-and-jquery/

相关文章：