選擇下拉HTML
[英]Select drop down html
問題描述
我有一個主選擇“ main”，還有一個從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>
這樣，我希望可以一次為所有選擇選擇選項，但要保持僅更改某些選擇的可能性。
4 個解決方案
解決方案1
0 2010-10-05 07:21:36
我沒有看到任何問號。
我看到的唯一問題是您應該使用.selectedIndex而不是.value 。
jQuery解決方案：
$(".selectorClass").each(function(index, selectorToUpdate){
selectorToUpdate.selectedIndex = $('#main').selectedIndex;
});
將其放在函數中，並調用該函數進行onchange。
解決方案2
0 2010-10-05 07:34:46
我了解的是，您有一個<select>下拉列表，並且在此文本中更改文本時，您想要在屏幕上的一個或多個其他下拉列表中更改選擇。 我對嗎？
如果是這種情況，那么您必須具有javascript函數，並在<select>的onchange中調用它。
在此javascript函數中，您必須設置所需的所有下拉列表的選定值。
如果這不是您想要的，可以請改寫您的問題並告訴我們您到底想要什么？
編輯
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;
}
}
}
在您的main的onchange中調用setElement() 。 此功能從主 <select>獲取所選項目，並在其他下拉列表中選擇具有相同值的項目。
您需要為每個需要更改的選擇調用一次selectThisValue函數。
根據您的代碼更改ID。
解決方案3
0 2010-10-05 08:04:46
我使它像這樣工作：
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中實現。
解決方案4
0
切勿在所有選擇元素中都使用相同的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下拉列表選擇單選按鈕
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.