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> id，您可以存储关联数组（如地图），最后选择的值，甚至是<div> id。在onchange事件处理程序中，只需隐藏地图中包含id的<div>，然后显示新的。{/ p>

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

请参阅此JSFiddle中的示例。

在此示例中，有一个多维关联数组（一种地图地图），用于存储每个<option>的{{1}}。每个<select>也与其选中时显示的<option> ID相关联。该相同的数组用于存储先前为数组选择的值（在条目<div>中）。

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

Javascript：

<select>

HTML

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

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

1 个答案: