1

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

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

但我想在一个页面上拥有多个这些，所以我需要一些不仅仅是基于数字的东西。

4

1 回答 1

0

而不是手动隐藏所有 div，您可以隐藏<div>与先前选择的值相关的内容。您可以在其中存储一个关联数组（如地图），对于给定的<select>id，最后选择的值，甚至是<div>id。在onchange事件处理程序中，只需在地图中隐藏<div>id 并显示新的。

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

请参阅此JSFiddle中的示例。

在这个例子中，有一个多维关联数组（一种映射的映射），它存储<option>每个 s的 s <select>。每个<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>
于 2013-02-20T10:55:18.133 回答