如何链接到表单选择选项下拉列表
问题描述：
我有一个网页使用4搜索框中的2在标题& 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点的形式，我希望当用户改变<的一个莫名其妙动态选择> <选项>页上，则其他<选择> <选项>在标题和其他地方都在改变同样的价值呢？
任何想法？
答
假设你有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>
只需使用对身体负荷传递的“选择”的ID已经取得“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;
});
}
我已经插入了代码段也。尝试一下。
function connectSelect(id1, id2) {
\t var select1 = document.getElementById(id1);
\t var select2 = document.getElementById(id2);
\t var i, val1, text1, val2, text2, errText;
\t
\t //to check whether both the select elements are of same length or not
\t if (select1.length != select2.length) {
\t \t alert("connectSelect Function Error: Both the 'Select' elements should have same number of options!");
\t \t return;
\t }
\t
\t //after assuring both the select elements to be of same length
\t //to check whether both the select elements have same value and text
\t for (i = 0; i < select1.length; i++) {
\t \t val1 = select1.options[i].value;
\t \t text1 = select1.options[i].innerHTML;
\t \t val2 = select2.options[i].value;
\t \t text2 = select2.options[i].innerHTML;
\t \t
\t \t if (val1 != val2 || text1 != text2) {
\t \t \t errText = "Both the 'Select' elements should have same options with same value and text!";
\t \t \t errText += "\n";
\t \t \t errText += "\n";
\t \t \t errText += "First mismatch: Option " + (i+1);
\t \t \t alert("connectSelect Function Error: " + errText);
\t \t \t return;
\t \t }
\t }
\t
\t //after assuring both the select elements to be same
\t select1.addEventListener("change", function(){
\t \t var index = this.selectedIndex;
\t \t select2.options[index].selected = true;
\t });
\t select2.addEventListener("change", function(){
\t \t var index = this.selectedIndex;
\t \t select1.options[index].selected = true;
\t });
}<html>
\t <head>
\t \t <script src="test.js"></script>
\t </head>
\t <body onload="connectSelect('first', 'second')">
\t \t <select id="first">
\t \t \t <option value="0">0</option>
\t \t \t <option value="1">1</option>
\t \t \t <option value="2">2</option>
\t \t \t <option value="3">3</option>
\t \t \t <option value="4">4</option>
\t \t </select>
\t \t <select id="second">
\t \t \t <option value="0">0</option>
\t \t \t <option value="1">1</option>
\t \t \t <option value="2">2</option>
\t \t \t <option value="3">3</option>
\t \t \t <option value="4">4</option>
\t \t </select>
\t </body>
</html>希望它帮助。
+0
没有注意到问题的最后一条评论。那小提琴真的很棒。 –
你可以使用jquery：attach回调来改变每个'
试试这个https://jsfiddle.net/jkhmvnuj/ –
太棒了！工作完美，谢谢你，你应该重新发布你的jsfiddle例子作为答案，所以我可以upvote你的答案是正确的，再次感谢。非常容易实现和少量的js代码。干杯。 –