Javascript 如何链接到表单选择选项下拉列表_Javascript_Php_Html_Web

Javascript 如何链接到表单选择选项下拉列表

javascript php html web

Javascript 如何链接到表单选择选项下拉列表,javascript,php,html,web,Javascript,Php,Html,Web,我有一个网页使用4个搜索框的2在标题和2在主页正文。首页的表头表单和表体表单相同，查询的搜索页面相同我的问题是，我如何链接下拉列表，以便在一个下拉列表发生更改时，其他下拉列表也会随之更改目前，我正在使用php在到达页面时切换到适当的类别。如： >第一类假设您有2个“选择”html元素，如下所示： test.html <html> <head> <script src="connectSelect.js"></script

我有一个网页使用4个搜索框的2在标题和2在主页正文。首页的表头表单和表体表单相同，查询的搜索页面相同

我的问题是，我如何链接下拉列表，以便在一个下拉列表发生更改时，其他下拉列表也会随之更改

目前，我正在使用php在到达页面时切换到适当的类别。
如：

>第一类
假设您有2个“选择”html元素，如下所示：
test.html
<html>
    <head>
        <script src="connectSelect.js"></script>
    </head>
    <body onload="connectSelect('first', 'second')">
        <select id="first">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
        <select id="second">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </body>
</html>


0
1.
2.
3.
4.
0
1.
2.
3.
4.

只需在通过要连接的“Select”元素的id的body load上使用已经生成的“connectSelect”函数
在标题中包含connectSelect.js文件。以下是代码：
connectSelect.js
function connectSelect(id1, id2) {
    var select1 = document.getElementById(id1);
    var select2 = document.getElementById(id2);
    var i, val1, text1, val2, text2, errText;

    //to check whether both the select elements are of same length or not
    if (select1.length != select2.length) {
        alert("connectSelect Function Error: Both the 'Select' elements should have same number of options!");
        return;
    }

    //after assuring both the select elements to be of same length
    //to check whether both the select elements have same value and text
    for (i = 0; i < select1.length; i++) {
        val1 = select1.options[i].value;
        text1 = select1.options[i].innerHTML;
        val2 = select2.options[i].value;
        text2 = select2.options[i].innerHTML;

        if (val1 != val2 || text1 != text2) {
            errText = "Both the 'Select' elements should have same options with same value and text!";
            errText += "\n";
            errText += "\n";
            errText += "First mismatch: Option " + (i+1);
            alert("connectSelect Function Error: " + errText);
            return;
        }
    }

    //after assuring both the select elements to be same
    select1.addEventListener("change", function(){
        var index = this.selectedIndex;
        select2.options[index].selected = true;
    });
    select2.addEventListener("change", function(){
        var index = this.selectedIndex;
        select1.options[index].selected = true;
    });
}

函数连接选择（id1、id2）{
var select1=document.getElementById（id1）；
var select2=document.getElementById（id2）；
变量i、val1、text1、val2、text2、errText；
//检查两个选定图元是否具有相同的长度
如果（选择1.length！=选择2.length）{
警报（“connectSelect函数错误：两个“Select”元素应具有相同数量的选项！”）；
返回；
}
//在确保两个选定图元的长度相同后
//检查两个选择元素是否具有相同的值和文本
对于（i=0；i

我还插入了代码片段。试试看

函数连接选择（id1、id2）{
var select1=document.getElementById（id1）；
var select2=document.getElementById（id2）；
变量i、val1、text1、val2、text2、errText；
//检查两个选定图元是否具有相同的长度
如果（选择1.length！=选择2.length）{
警报（“connectSelect函数错误：两个“Select”元素应具有相同数量的选项！”）；
返回；
}
//在确保两个选定图元的长度相同后
//检查两个选择元素是否具有相同的值和文本
对于（i=0；i


0
1.
2.
3.
4.
0
1.
2.
3.
4.
您可以使用jquery:attach callback来更改每个
的事件，获取它的选定值并相应地更改其他值。试试这个！这很好，谢谢你，你应该重新发布你的JSFIDLE示例作为答案，这样我就可以投票认为你的答案是正确的，再次感谢。实现起来非常简单，js代码非常少。干杯。没有注意到问题的最后一句话。那把小提琴真棒。