0

ドロップダウンの選択に基づいて div を非表示および表示したい。つまり、ドロップダウン オプション 1 を選択すると、ID 1 の div が表示され、ID 2 の 2 つの div が表示されます。しかし、jQuery を使用せずに css または Javascript を使用してこれを行いたいと考えています。これは可能ですか？Heres 私のサンプル ドロップ ダウンします。みんなありがとう。

<select name="options">
  <option value="1"> Loan Protection Insurance</option>
  <option value="2"> GAP or Cash Assist Insurance</option>
  <option value="3"> Home Insurance</option>
  <option value="4"> Landlords Insurance</option>
  <option value="5">  Car Insurance</option>
</select>

<div id="1">Test</div>
<div id="2">Test</div>
4

2 に答える 2

9

changeドロップダウンのイベントを処理して適切なアクションを実行する必要があるため、CSSだけでは不可能です。

あなたは純粋なJSを介してそれを簡単に行うことができます：

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

デモ： http： //jsfiddle.net/2ukyA/

更新： DIVのIDが「divname1」などの場合。

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';
};
于 2012-10-02T04:51:34.320 に答える
0

「選択」を気にしない場合は、css のみのドロップダウン メニューを作成するのは非常に簡単です。

チェックアウト: http://www.alistapart.com/articles/horizdropdowns/

css :hover セレクターを使用して、コンテンツの表示/非表示を切り替えることができます。

すなわち:

<ul>
   <li class="menu">
       group1
       <div class="dropdown">dropdown content1</div>
   </li>
   <li class="menu">
       group2
       <div class="dropdown">dropdown content2</div>
   </li>
   <li class="menu">
       group3
       <div class="dropdown">dropdown content3</div>
   </li>
   <li class="menu">
       group4
       <div class="dropdown">dropdown content4</div>
   </li>
<ul>

次に、css は次のようにする必要があります。

.top-menu{}
.top-menu .dropdown{display:none;}
.top-menu:hover .dropdown{display:block;}
于 2012-10-02T06:01:04.897 に答える