Question

我正在尝试创建一个组合框以显示飞蛾，当我点击1月时我只需要看到div1和febraury需要看到这样的div 2：

   January........
   <div> It will show info when only january  is selected</div>

   Febraury........
   <div> It will show info when only febraury is selected</div>

这是我的信息：

 <select id="month" name="month">
   <option value="1">January</option>
   <option value="2">Febraury</option>
   <option value="3">March</option>
 </select>


 <-------ALL MY DIVS WILL BE HIDE  -------------->
  <div> It will show info when only january  is selected</div>
  <div> It will show info when only Febraury is selected</div>
  <div> It will show info when only March    is selected</div>
 <----- It should show each div according option div is selected ----->

这是我的演示

 http://jsfiddle.net/q2E5e/

请有人帮我这个吗？

我真的很感激帮助

Answer 1

FIDDLE

你需要给你的div提供id，然后使用：

divJan.style.display = "block";

块将显示你的div，没有人会隐藏它。您只需要一个确定选择了哪个元素的函数和一个跟踪更改的事件。这是一个例子：

var cmbMonth = document.getElementById('month');
var divJan = document.getElementById('divJan');
var divFeb = document.getElementById('divFeb');
var divCoo = document.getElementById('divCoo');

cmbMonth.addEventListener('change', function (e) {

    if (cmbMonth.value == 1) {
        divJan.style.display = "block";
        divFeb.style.display = "none";
        divCoo.style.display = "none";

    } else if (cmbMonth.value == 2) {
        divJan.style.display = "none";
        divFeb.style.display = "block";
        divCoo.style.display = "none";

    } else if (cmbMonth.value == 3) {
        divJan.style.display = "none";
        divFeb.style.display = "none";
        divCoo.style.display = "block";
    }

});

Answer 2

使用

的jQuery解决方案

$('#month').change()

和

$(some id).hide()

JSFiddle

Answer 3

首先，如果您创建一个带有文本值的数组，而不是使用文本隐藏div元素，那么在选择适当的值后应该显示该数组。

var divTextValues = [
    "You selected January",
    "You selected February",
    "You selected March",
];

其次，为简单起见，下拉列表的起始值为0。

<select id="month" name="month">
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
</select>

第三，默认隐藏div元素。

<div id="displayMonth" style="display:none;"></div>

然后添加事件处理程序。

var month = document.getElementById("month"),
    displayMonth = document.getElementById("displayMonth");

month.addEventListener("change", function (e) {
    var selected = this[this.selectedIndex];
    if (selected.value > -1) {
        displayMonth.textContent = divTextValues[selected.value];
        displayMonth.style.display = "block";
    } else {
        displayMonth.style.display = "none";
    }
});

Demonstration

如何根据选择的选项值创建一个javascript来显示和隐藏信息？

3 个答案: