Question

我有一个主要选择“主”，以及从2到9的列表，根据情况，选择更多。如果我想更改所有这些辅助选择中的值，并且具有与主选择相同的值，该怎么办？因此主选择将同时更改多个选择：所以，我有主要的选择：

<select name="main" id="main" onchange="document.getElementById('item').value = document.getElementById('main').value">
  <option value = p>Please Select</option>
  <option value = b>BOOK</option>
  <option value = d>DVD</option>
</select>

接下来的选择是在循环中的php中进行的，所以我将根据情况选择2,3,4,5，...，9。每个人都有不同的名字（因为我在POST中使用这个名字）

<select name=item_".$itemnumber." id="item">
 <option value = p>Please Select</option>
 <option value = b>BOOK</option>
 <option value = d>DVD</option>
</select>

有了这个，我想有可能一次性选择所有选择的选项，但保持只改变部分选择的可能性。

Answer 1

我没有看到任何问号。

我看到的唯一问题是您应该使用.selectedIndex而不是.value。

jQuery解决方案：

$(".selectorClass").each(function(index, selectorToUpdate){
    selectorToUpdate.selectedIndex = $('#main').selectedIndex;
});

将它放在一个函数中并调用该函数进行onchange。

Answer 2

我的理解是，您有一个<select>下拉列表，并且在更改此文本中的文本时，您希望更改屏幕上一个或多个其他下拉列表中的选择。我对吗？

如果是这种情况，那么你必须有一个javascript函数并在onchange的{{1}}中调用它。
在这个javascript函数中，您必须设置所需的所有下拉列表的选定值。

如果这不是您想要的，请您重新解释一下您的问题并告诉我们您的确切要求？

编辑

<select>

在您的主要交换中呼叫function setElement() { var selectedValue = document.getElementById("main").value; selectThisValue(document.getElementById("child1"), selectedValue); selectThisValue (document.getElementById("child2"), selectedValue); } function selectThisValue(selectElement, val) { for ( var i = 0; i < selectElement.options.length; i++ ) { if ( selectElement.options[i].value == val ) { selectElement.options[i].selected = true; return; } } }。此功能从主 setElement()中获取所选项目，并选择其他下拉列表中具有相同值的项目。
您需要为每个需要更改的选项调用<select>功能一次根据您的代码更改ID。

Answer 3

我让它像那样工作：

 function changeValue(theElement) {
    var theForm = theElement.form, z = 0;
    for(z=0; z<theForm.length;z++){
        if(theForm[z].id == 'item' && theForm[z].id != 'main'){
            theForm[z].selectedIndex = theElement.selectedIndex;
        }
    }
}

但是我不知道这是不是最好的方法，我在这里听说jQuery会更容易，所以我想知道如何在jQuery中使用它。

Answer 4

永远不要在所有选择元素中添加相同的ID ...对于页面中的元素，ID应该是唯一的。将您的HTML更改为

<select id="main" class="master">....</select>
<select id="test1" class="child">....</select>
<select id="test2" class="child">....</select>
<select id="test3" class="child">....</select>
<select id="test4" class="child">....</select>

多个元素的类属性可以相同。

您的功能需要修改为这样（我没有测试过这个，但应该工作..）

 function changeValue(theElement) {
    var theForm = theElement.form, z = 0;
    for(z=0; z<theForm.length;z++){
        if(theForm[z].className == 'child'){
            theForm[z].selectedIndex = theElement.selectedIndex;
        }
    }
}

<顺便说一下，这些选择框中的选项是否有所不同？如果是这样，你将不得不按值而不是索引

进行匹配

编辑：这是我后来写的代码..修改它以满足您的需要

<html>
<head><title>select change cascade</title></head>
<body>
<select id="main" class="master"><option value="1">book</option><option value="2">cd</option></select>
<select id="test1" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test2" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test3" class="child"><option value="1">book</option><option value="2">cd</option></select>
<select id="test4" class="child"><option value="1">book</option><option value="2">cd</option></select>
<script type="text/javascript" src="./selectchange.js"></script>
</body>
</html>

和selectChange.js

var main = document.getElementById("main");
main.onchange = function (){
    sels = document.getElementsByTagName("select");
    for(z=0; z<sels.length;z++){
        if(sels[z].className == 'child'){
            sels[z].selectedIndex = this.selectedIndex;
        }
    }   
}

选择下拉html

4 个答案: