Question

我使用这个javascript在选择时显示不同的div类。如果没有选择任何内容，我需要显示一个div类，例如当加载页面时，根据选择将其替换为其中一个div ...

<script type="text/javascript"><!--
    var lastDiv = "";
    function showDiv(divName) {
    // hide last div
    if (lastDiv) {
        document.getElementById(lastDiv).className = "hiddenDiv";
    }
    //if value of the box is not nothing and an object with that name exists, then change the class
    if (divName && document.getElementById(divName)) {
        document.getElementById(divName).className = "visibleDiv";
        lastDiv = divName;
    }
}
//-->
    </script>

的CSS：

<style type="text/css" media="screen"><!--
    .hiddenDiv {
    display: none;
    }
    .visibleDiv {
    display: block;
    border: 1px grey solid;
    }

    --></style>

HTML：

<form id="FormName" action="blah.php" method="get" name="FormName">
        <select name="selectName" size="1" onChange="showDiv(this.value);">
            <option value="">Choose One...</option>
            <option value="one">first</option>
            <option value="two">second</option>
            <option value="three">third</option>
        </select>
    </form>
    <p id="one" class="hiddenDiv">This is paragraph 1.</p>
    <p id="two" class="hiddenDiv">This is paragraph 2.</p>
    <p id="three" class="hiddenDiv">This is paragraph 3.</p>

有人可以帮忙吗？

Answer 1

<select onChange="showDiv(this.value);">

<select>元素没有value属性。该值位于其<option>个孩子中。要获取<select>元素当前所选选项的值，您需要以下内容：

var selected = dropdown.options[dropdown.selectedIndex].value;

因此，您的onchange来电需要更改如下：

<select onchange="showDiv(this.options[this.selectedIndex].value);">

也就是说，onchange属性拼写全部小写，段落不是div。

Answer 2

将id分配给选择列表

<select name="selectName" id="selectName" size="1" onChange="showDiv(this.value);">

调用window.onload函数

window.onload =function (){
        showDiv(document.getElementById("selectName").value);
}

如果未选择任何内容，则显示一个div

2 个答案: