Question

我目前正在尝试仅在用户从上一个选择框中选择特定选项时才能显示选择框。我已经尝试了几个小时，但我似乎无法到达任何地方。这是我的代码：

    <p>Did you install legacy or X1 cable boxes?</p>

    <select id="test4" onchange="myFunction2()">
        <option vlaue="" disabled selected>Select your option</option>
        <option value="E.A.">Legacy</option>
        <option value="E.B.">X1</option>
        <option value="both">both</option></option>
   </select>
<hr />

<div id = "abc">

    <p>How many X1 cable boxes did you install?</p>

    <select id="test3">
        <option vlaue="" disabled selected>Select your option</option>
        <option value="x1">1</option>
        <option value="x2">2</option>
        <option value="x3">3</option>   
    </select>
</div>

<script type="text/javascript">

    var abcd = document.getElementById("abc");
    abcd.style.display = 'none';

    var a = document.getElementById("test4").value;
    var c = document.getElementById("test3").value;

    function myFunction2() {
        if (a == "E.B.") {
            abcd.style.display = 'block';
        }
        else {
            abcd.style.display = 'none';
        }
    }
</script>

任何建议都将不胜感激。

编辑： Terrymorse的代码工作得很好，但在编辑我的代码后，我遇到了另一个问题。我可能需要重做我的代码。

代码：

<p>Did you install legacy or X1 cable boxes?</p>

<select id="test4" onchange="myFunction2()">
    <option vlaue="" disabled selected>Select your option</option>
    <option value="legacy">Legacy</option>
    <option value="x1">X1</option>  
    <option value="both">both</option></option>
</select>

<hr />

<div id = "x1Install">

<p>How many X1 cable boxes did you install?</p>

<select id="test3">
    <option vlaue="" disabled selected>Select your option</option>
    <option value="E.B.x1">1</option>
    <option value="E.B.x2">2</option>
    <option value="E.B.x3">3</option>   
</select>
</div>

<br />
<br />

<div id="legacyInstall">

<p>How many legacy cable boxes did you install?</p>

<select id="test5"> 
    <option vlaue="" disabled selected>Select your option</option>
    <option value="E.A.x1">1</option>
    <option value="E.A.x2">2</option>
    <option value="E.A.x3">3</option>
</select>

</div>

<br />
<br />

<button onclick="myFunction()">Result</button>

<p id="result"></p>

 <script type="text/javascript">

    var x1Install = document.getElementById("x1Install");
    var legacyInstall = document.getElementById("legacyInstall");

    x1Install.style.display = 'none';
    legacyInstall.style.display = 'none';

    var legacyOrX1 = document.getElementById("test4").value;
    var x1Box = document.getElementById("test3").value;
    var legacyBox = document.getElementById("test5").value;

    function myFunction2() {
        var legacyOrX1 = document.getElementById("test4").value;
        var x1Box = document.getElementById("test3").value;
        var legacyBox = document.getElementById("test5").value;

        if (legacyOrX1 == "x1") {
            x1Install.style.display = 'block';
            legacyInstall.style.display='none';
        }
        else if (legacyOrX1 == "legacy") {
            x1Install.style.display = 'none';
            legacyInstall.style.display = 'block';
        }
        else {
            x1Install.style.display = 'block';
            legacyInstall.style.display = 'block';
        }
    }

    function myFunction() {
        var legacyOrX1 = document.getElementById("test4").value;
        var x1Box = document.getElementById("test3").value;
        var legacyBox = document.getElementById("test5").value;
        document.getElementById("result").innerHTML = (x1Box) + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + (legacyBox);
    }
</script>

如果我只选择X1或只选择遗留，它仍然显示我没有安装的盒子类型的输出。我不希望发生这种情况。

Answer 1

在全局空间中有这两个语句，因此只有在页面加载时才会对它们进行评估：

var a = document.getElementById("test4").value;
var c = document.getElementById("test3").value;

应该在myfunction2()内移动，因此在调用函数时会对它们进行评估。

这里是working jsfiddle。

Answer 2

使用其selectedIndex属性获取下拉选择列表的值。这样做：

＆＃13;

var abcd = document.getElementById("abc");
abcd.style.display = 'none';
var a = document.getElementById("test4");
var c = document.getElementById("test3");
function myFunction2() {
    if (a.options[a.selectedIndex].value == "E.B.") {
        abcd.style.display = 'block';
    }
    else {
        abcd.style.display = 'none';
    }
}

＆＃13;

    <p>Did you install legacy or X1 cable boxes?</p>

    <select id="test4" onchange="myFunction2()">

        <option vlaue="" disabled selected>Select your option</option>

        <option value="E.A.">Legacy</option>

        <option value="E.B.">X1</option>

        <option value="both">both</option></option>

   </select>

<hr />

<div id = "abc">

    <p>How many X1 cable boxes did you install?</p>

    <select id="test3">

        <option vlaue="" disabled selected>Select your option</option>

        <option value="x1">1</option>

        <option value="x2">2</option>

        <option value="x3">3</option>

    </select>

</div>

＆＃13;

Answer 3

好吧，代码有点凌乱，主要问题是：

代码位于<style>标记中，该标记用于使用CSS，而不是JS
如果代码是在正确的<script>标记中运行的话，那么只有字段的初始值会始终存在于变量a中，这意味着它永远不会触发事件

但是代码肯定有一个好的方面，毕竟你构建了一个简单的切换机制，你刚才错误地实现了它：）

我的更改：

已更改：onclick="myFunction();"
收件人：onclick="myFunction2(this)"

将this作为参数传递给函数引用元素本身，这意味着我们可以直接从函数中的参数获取值。
已更改：id = "abc"
收件人：id="abc"

只需移除空格以防止任何怪癖。

＆＃13;

function myFunction2(elem) {
  if (elem.value == 'E.B.') {
    abc_div.style.display = 'block';
  } else {
    abc_div.style.display = 'none';
  }
}

window.onload = function() {
  window.abc_div = document.getElementById('abc');
  abc_div.style.display = 'none';
}

＆＃13;

<div>
    <p>Did you install legacy or X1 cable boxes?</p>
    <select id="test4" onchange="myFunction2(this)">
        <option vlaue="" disabled selected>Select your option</option>
        <option value="E.A.">Legacy</option>
        <option value="E.B.">X1</option>
        <option value="both">both</option>
   </select>
<hr />
<div id="abc">
    <p>How many X1 cable boxes did you install?</p>
    <select id="test3">
        <option vlaue="" disabled selected>Select your option</option>
        <option value="x1">1</option>
        <option value="x2">2</option>
        <option value="x3">3</option>
    </select>
</div>

＆＃13;

如何根据从其他选择框中选取的选项使选择框可见

3 个答案: