Question

我试图在使用js基于选择输入显示两个div块之间切换。以下是源代码：

<html>
<head>
</head>

<style>
.wrapper {
    left: 100px;
    position: relative;
    width: 400px;
    }

   .form-wrapper {
     position: relative;
     width: 200px;
   }

   .label {
  font-size: 1.1em;
  }

  select {
     font-size: .9em;
}
</style>

<body onload="categorySelector();">

<script type="text/javascript">

function init() {
    document.getElementById("add").style.display = "block";
    document.getElementById("search").style.display = "none";   
}

function categorySelector() {
    var val = document.getElementById("operation").value;
    if(val == "addOp") {
        document.getElementById("add").style.display = "block";
        document.getElementById("search").style.display = "none";
    } else if(val == "searchOp") {
        alert(val);
        document.getElementById("add").style.display = "none";
        document.getElementById("search").style.display = "block";
    }
}

</script>

<div class="wrapper">
        <div>
            <label> Select the operation:</label>
            <select id="operation" name="operationSelection" onchange="categorySelector()">
                <option value="addOp"> Addition </option>
                <option value="searchOp"> Search </option>      
            </select>
        </div>                      
        <div id="add" class="form-wrapper">
                <form name="addForm" action="udm_2(working).jsp" method="POST">
                        <div class="label">Select the Category:</div>
                        <div>
                            <input type="radio" name="addCategory" value="wD" checked="checked">
                            <label for="wD">WhiteListed Domain</label>  
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="wE" checked="checked">
                            <label for="wE">WhiteListed Email</label>   
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="bD" checked="checked">
                            <label for="bD">BlackListed Domain</label>  
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="bE" checked="checked">
                            <label for="bE">BlackListed Email</label>   
                        <div>   
                        <input type="submit"/>
                </form>
        </div>

        <div id="search" class="form-wrapper">
                <form name="addForm" action="udm_2(working).jsp" method="POST">
                        <div class="label">Select the Category:</div>
                        <div>
                            <input type="radio" name="addCategory" value="wD" checked="checked">
                            <label for="wD">WhiteListed Domain</label>  
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="wE" checked="checked">
                            <label for="wE">WhiteListed Email</label>   
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="bD" checked="checked">
                            <label for="bD">BlackListed Domain</label>  
                        <div>
                        <div>
                            <input type="radio" name="addCategory" value="bE" checked="checked">
                            <label for="bE">BlackListed Email</label>   
                        <div>   
                        <input type="submit"/>
                </form>
        </div>
</div>
</body>
</html>

我面临的问题是，在页面加载时会显示第一个div块，但是当我切换到其他选择选项时，该选项的相应div块不会显示。有人可以解释为什么不会发生？

Answer 1

两件事：

使用元素的值属性更改触发onchange事件。由于您没有更改＆＃34;选择＆＃34;元素值，该事件永远不会被触发。 Source。解决方案here可能会对此有所帮助。
您似乎正在尝试获取select元素的值而不是所选的选项。

试试这个：

function categorySelector() {
    var i = document.getElementById("operation").selectedIndex;
    var val = document.getElementsByTagName("option")[i].value;

    alert("val = "+val);

    if (val == "addOp") {
        document.getElementById("add").style.display = "block";
        document.getElementById("search").style.display = "none";
    } else if (val == "searchOp") {
        alert(val);
        document.getElementById("add").style.display = "none";
        document.getElementById("search").style.display = "block";
    }
}

希望这会有所帮助。：）

Answer 2

在您的表单中，您不会关闭divs - 每次您打开新的表单时。
HTML中的示例：

<div>
    <input type="radio" name="addCategory" value="wD" checked="checked">
    <label for="wD">WhiteListed Domain</label>  
<div>

只需将后者从<div>更改为</div>。

您的代码中多次出现此问题。这样第二种形式就在第一种形式中。隐藏第一个表单会使所有包含的元素（包括第二个表单）不可见。

根据选择输入在显示各种div块之间切换

2 个答案: