Question

我有一个网页，在标题和表格中使用4个搜索框。 2在主页的正文中。两种标题形式和主页正文中的表单相同，查询相同的搜索页面。

我的问题是我如何链接下拉列表，以便当其中一个更改后，其他人跟随。

目前我正在使用php在到达页面时切换到适当的类别例如： <option value='-1' <?php if ($cat == "-1") {print("selected");}?>>All Categories</option> <option value='0'<?php if ($cat == "0") {print("selected");}?>>Category One</option> <option value='1' <?php if ($cat == "1") {print("selected");}?>>Category Two</option>

在查询后到达页面时效果很好。

然而，因为我的主页上有4个表单，所以当用户更改其中一个＆lt;选择＆gt;＆lt;选项＆gt;在页面然后另一个＆lt;选择＆gt;＆lt;选项＆gt;在标题和其他地方都变为相同的值？

有什么想法吗？

Answer 1

假设您有2＆＃39;选择＆＃39; 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>

只需使用已制作的＆＃39; connectSelect＆＃39;通过＆＃39;选择＆＃39;的身体负荷传递功能。你要连接的元素。

在标题中包含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;
    });
}

我也插入了代码段。试试吧。

＆＃13;

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

＆＃13;

<html>
	<head>
		<script src="test.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>

＆＃13;

希望它有所帮助。

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

1 个答案: