javascript - 如何在 JavaScript 中打开一个 div onselectedindexchanged

Question

我的页面中有 2 个 div。一个在页面加载时打开，另一个应在选择下拉列表项时打开。我已经为此编写了 javascript，但问题是当我单击提交按钮时，第一个 div 正在打开。

我的javascript如下:

function opendiv() {
    if ((document.getElementById("ddlistuser").value == "IP Address") && (document.getElementById("ipadd").style.display == "none"))
    {
        document.getElementById("username").style.display = "none";
        document.getElementById("ipadd").style.display = "block";
        document.getElementById("ddllist").value = "IP Address";
    } else if ((document.getElementById("ddllist").value == "Username") && (document.getElementById("username").style.display == "none"))
    {
        document.getElementById("username").style.display = "block";
        document.getElementById("ipadd").style.display = "none";
        document.getElementById("ddlistuser").value = "Username";
    }
}

Answer 1

示例 HTML

<div id="one">
    <select id="myselect">
        <option>nothing</option>
        <option value="1">Something</option>
    </select>
</div>

<div id="two" style="display: none;">Hello there!!</div>

在jQuery ，您可以通过以下方式非常简单地实现这一点:

$("#myselect").change(function() {
    if ($(this).val() > 0) {
        $("#two").show();
    } 
});

本例中的 HTML 是:

• 这将事件处理程序绑定(bind)到 <select /> DOM 元素，每次更改所选值时都会触发。

• 在被触发的函数中，我们检查新值是否大于 0(您可以根据需要进行任何条件检查)。

• 如果是，那么我们调用 show() 第二div (基本上只是将样式从 display: none 更改为 display: block

根据下面 Rob 的评论 - 在纯 JavaScript 中，我上面的示例可以写成:

window.showdiv2 = function (selectel) {
    if (selectel.value > 0) {
        document.getElementById('two').style.display = 'block';
    }
}

通过以上，你可以改变你的select开始标记具有 onchange="showdiv2(this)" 的属性.

或者您可以添加一个事件监听器，但是您需要确保它具有跨浏览器支持，so check this out .

我个人认为没有必要，因为任何 JavaScript 库的核心优势是您可以将大量辅助代码从主项目代码中隐藏起来。但您喜欢哪个都可以。