0

我想根据下拉选择隐藏和显示一个 div。也就是说，如果我选择下拉选项 1，id 为 1 的 div 应该显示出来，对于 id 为 2 的 2 div 等等。但我想在不使用 jQuery 而是使用 css 或 Javascript 的情况下做到这一点。这可能吗？这是我的示例下拉列表。多谢你们。

<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

单独使用 CSS 是不可能的，因为您需要处理change下拉事件并采取适当的措施。

您可以通过纯 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/

You can show/hide content using the css :hover selector.

i.e:

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

Your css then needs to be similar to:

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