javascript - 用于显示或隐藏 div 内容的下拉菜单不起作用

Question

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

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

这是代码 http://jsfiddle.net/2ukyA/7/

但是我可以让这段代码工作 http://jsfiddle.net/2ukyA/

但是我想在一个页面上显示多个这样的内容，所以我需要的东西不仅仅是基于数字。

Answer 1

您可以隐藏<div>，而不是手动隐藏所有div。与之前选择的值相关。对于给定的<select>，您可以存储一个关联数组(如 map )。 id、最后选择的值，甚至 <div> ID。在 onchange事件处理程序，只需隐藏 <div>与 map 中的 id 一起显示，并显示新的。

请注意，您仍然需要在 <option> 之间建立关联(如果它们相同，则为隐式关联；如果将其存储在数组中，则为显式关联)。和 <div> id。

请参阅此 JSFiddle 中的示例。

在此示例中，有一个多维关联数组(某种 map 的映射)，用于存储 <option>每个<select> s 。每个<option>也与 <div> 相关联选择时显示的 id。该数组用于存储先前为数组选择的值(在条目 previousValue 中)。

请注意，关联数组的定义是在 javacsript 中静态完成的，但可以从外部 JSON 文件或 AJAX 请求动态检索它。 <select>元素也可以动态构建，但您需要更多信息(即选项描述)。

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

<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>