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/

しかし、私はこれらを1ページに複数入れたいので、数字だけに基づいていないものが必要です。

4

1 に答える 1

0

<div>すべてのdivを手動で非表示にする代わりに、以前に選択した値に関連するものを非表示にすることができます。<select>特定のIDに対して、最後に選択された値、さらにはIDが含まれている連想配列（マップなど）を格納できます<div>。onchangeイベントハンドラーで、マップ内のIDでを非表示にし<div>、新しいIDを表示します。

<option>と<div>idの間に関連付け（同じ場合は暗黙的、配列に格納する場合は明示的）が必要であることに注意してください。

このJSFiddleの例を参照してください。

<option>この例では、各のsを格納する多次元連想配列（マップのマップの一種）があります<select>。それぞれは、選択時に表示されるIDに<option>も関連付けられています。<div>これと同じ配列を使用して、以前に選択した配列の値を（エントリに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 に答える