Javascript 用于显示或隐藏div内容的下拉列表无效

我不明白为什么这个脚本不起作用：

<select name="options" id="options">
  <option value="divname1"> Loan Protection Insurance</option>
  <option value="divname2"> GAP or Cash Assist Insurance</option>
  <option value="divname3"> Home Insurance</option>
  <option value="divname4"> Landlords Insurance</option>
  <option value="divname5"> Car Insurance</option>
</select>

<div id="divname1" style="display: block">Test 1</div>
<div id="divname2">Test 2</div>
<div id="divname3">Test 3</div>
<div id="divname4">Test 4</div>
<div id="divname5">Test 5</div>

document.getElementById('id-of-select').onchange = function() {
    var i = 1;
    var myDiv = document.getElementById("divname" + i);
    while(myDiv) {
        myDiv.style.display = 'none';
        myDiv = document.getElementById("divname" + ++i);
    }
    document.getElementById(this.value).style.display = 'block';
};

div {
display: none;   
}    

贷款保障保险
现金辅助保险
家庭保险
房东保险
汽车保险
测试1
测试2
测试3
测试4
测试5
document.getElementById（'id-of-select'）。onchange=function（）{
var i=1；
var myDiv=document.getElementById（“divname”+i）；
while（myDiv）{
myDiv.style.display='none'；
myDiv=document.getElementById（“divname”+++i）；
}
document.getElementById（this.value）.style.display='block'；
};
div{
显示：无；
}    

这是密码

然而，我可以让这个代码工作

---

但是我希望在一个页面上有多个div，因此我需要的不仅仅是基于数字的内容。

不必手动隐藏所有div，只需隐藏与先前选择的值相关的

。您可以存储一个关联数组（如映射），其中对于给定的

id，您拥有最后选择的值，甚至

id。在

onchange

事件处理程序中，只需在映射中用id隐藏

，然后显示新的值

请注意，

和

id之间仍然需要关联（如果它们相同，则隐式关联；如果存储在数组中，则显式关联）

请参见本文中的示例

在本例中，有一个多维关联数组（一种映射的映射），用于存储每个

的

。每个

也与选中时显示的

id关联。该数组用于存储以前为该数组选择的值（在条目

previousValue

中）

请注意，关联数组的定义是在JavaCScript中静态完成的，但它可以通过外部JSON文件或AJAX请求动态检索。

元素也可以动态构建，但您需要更多的信息（即选项描述）

Javascript:

var selectDivOptions= 
    {select1:  
     { 
        option11: 'div11',
        option12: 'div12',
        option13: 'div13'
     }, 
     select2:  { 
         option21: 'div21',
         option22: 'div22',
         option23: 'div23'
     } 
    };

for (var key in selectDivOptions){
    var element = document.getElementById(key);
    element.onchange = selectChange;
}

function selectChange(){
    // Hide the div pointed by the previous value
    var previousValue = selectDivOptions[this.id]['previousValue'];
    if (previousValue){
        document.getElementById(previousValue).style.display = 'none';
    }

    // Show the div
    var divToShow = selectDivOptions[this.id][this.value];
    if (divToShow){
        document.getElementById(divToShow).style.display='block';
    }
    // Store the current value as the previous value
    selectDivOptions[this.id]['previousValue'] = divToShow;
}

HTML

备选方案11
备选案文12
备选案文13
第11分部
第12分部
第13分部


选择21
备选案文22
选择23
第21分部
第22分部
第23分部

JSFIDLE上的第一个下拉列表似乎对我没有任何帮助，第二个可以正常工作？事实上，这是一个相当愚蠢的错误。

selectChange

功能一直在接收

select2

。它甚至不需要参数，您可以在函数中使用

this

引用

。请参阅更新的答案和更新的。

<select name="options" id="select1">
  <option value="option11"> Option 11</option>
  <option value="option12"> Option 12</option>
  <option value="option13"> Option 13</option>
</select>

<div id="div11">Div 11</div>
<div id="div12">Div 12</div> 
<div id="div13">Div 13</div> 

<br />
<select name="options2" id="select2">
  <option value="option21"> Option 21</option>
  <option value="option22"> Option 22</option>
  <option value="option23"> Option 23</option>
</select>
<div id="div21">Div 21</div>
<div id="div22">Div 22</div> 
<div id="div23">Div 23</div>