Javascript 一旦更改选择选项，将在另一个选择选项上显示结果

我已经创建了下面的代码，以便在选择value on select时执行函数onchange

我希望当第一个选择选项被选中时，第二个选择选项会改变

下面是第一个选择选项，它在onchange时触发对第二个选择选项的更改

<div class="form-group">
            <div class="col-sm-3 control-label">
                <label for="spacing"><?php echo ('Spacing'); ?><span class="star">&nbsp;*</span></label>
            </div>
            <div class="col-sm-7">
                <select name="spacing" id="spacing" class="required" onchange="showPagesDiv(this.value);
                caltotal(this);">
                <option value="Double Spaced">Double Spaced</option>
                <option value="Single Spaced">Single Spaced</option>
            </select>
        </div>

*
双倍行距
单间距

下面是第二个选择选项，该选项因更改时的第一个选择选项而更改

<div class="form-group">
        <div class="col-sm-3 control-label">
            <label for="no_of_pages1">No of Pages or words<span class="star">&nbsp;*</span></label>
        </div>
        <div class="col-sm-7">

            <div id="single" style="display: none;">
                <select name="no_of_pages1" id="no_of_pages1" onchange="caltotal()">
                      <?php
                    $query = $conn->query("SELECT  * FROM cww_avid_pages_words");
                     while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
                        if ($row['idpw'] == $post['no_of_pages']) {
                       echo '<option selected="selected" id="' . $row['idpw'] . 'nop" value="' . $row['idpw'] . '" title="' . $row['amount_added'] . '"> ' . $row['pages'] . ' Page(s) / ' . $row['words'] . ' Words</option>';
                    } else{
                         echo '<option selected="selected" id="' . $row['idpw'] . 'nop" value="' . $row['idpw'] . '" title="' . $row['amount_added'] . '"> ' . $row['pages'] . ' Page(s) / ' . $row['words'] . ' Words</option>';
                    }
                }
                    ?>

                </select>
            </div>
            <div id="double" >
                <select name="no_of_pages2" id="no_of_pages2" onchange="caltotal()">
                    <?php
                    $query = $conn->query("SELECT  * FROM cww_avid_pages_words");
                     while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
                        if ($row['idpw'] == $post['no_of_pages']) {
                        echo '<option selected="selected" id="' . $row['idpw'] . 'nop" value="' . $row['idpw'] . '" title="' . $row['amount_added'] . '"> ' . $row['pages'] . ' Page(s) / ' . $row['words'] . ' Words</option>';
                    } else {
                        echo '<option selected="selected" id="' . $row['idpw'] . 'nop" value="' . $row['idpw'] . '" title="' . $row['amount_added'] . '"> ' . $row['pages'] . ' Page(s) / ' . $row['words'] . ' Words</option>';
                    }
                    }
                    ?>

                </select>
            </div>
        </div>
    </div>

页数或字数*

javascript来实现更改，但更改不起作用

    <script type="text/javascript">
    function showPagesDiv(val) {

        if (val == 'Single Spaced') {
            document.getElementById('single').style.display = 'block';
            document.getElementById('double').style.display = 'none';
        } else if(var == 'Double Spaced') {
            document.getElementById('single').style.display = 'none';
            document.getElementById('double').style.display = 'block';
        }
    }
</script>

功能显示页面IV（val）{
如果（val==‘单间距’）{
document.getElementById（'single'）.style.display='block'；
document.getElementById（'double'）.style.display='none'；
}else if（var==‘双倍行距’）{
document.getElementById（'single'）.style.display='none'；
document.getElementById（'double'）.style.display='block'；
}
}

如果您在控制台日志中查找，则很容易找到答案。它会给你一个出错的地方。在这之前，关于PHP的几点：

<div class="form-group">
    <div class="col-sm-3 control-label">
        <!-- THERE IS NO NEED FOR PHP TO WRITE "Spacing" HERE -->
        <label for="spacing">Spacing<span class="star">&nbsp;*</span></label>
    </div>
    <div class="col-sm-7">
        <select name="spacing" id="spacing" class="required" onchange="showPagesDiv(this.value);caltotal(this);">
            <option value="Double Spaced">Double Spaced</option>
            <option value="Single Spaced">Single Spaced</option>
        </select>
    </div>

现在谈谈JavaScript无法工作的原因，您的

elseif

使用

var

而不是

val

，因此会出错。由于您只有两种可能性，因此您可以创建一个三值：

<script type="text/javascript">
    function showPagesDiv(val) {
        document.getElementById('single').style.display = (val == 'Single Spaced')? 'block' : 'none';
        document.getElementById('double').style.display = (val == 'Single Spaced')? 'none' : 'block';
    }
</script>

功能显示页面IV（val）{
document.getElementById（'single'）.style.display=（val='single Spaced'）？'block'：'none'；
document.getElementById（'double'）.style.display=（val='Single Spaced'）？'none'：'block'；
}

错误是什么？@DhananjaiPai javascript的工作方式与中不同，我想在选择感谢时开始工作，但我收到了以下错误：注意：未定义变量：post in，当我更改为

$\u post

时，我收到了以下错误通知：未定义索引：没有任何页面进入Hanks，但是我得到了这个错误：注意：未定义变量：post in，当我更改为$\u post时，我得到了这个错误注意：未定义索引：没有\\u个页面在里面，你需要首先检查是否设置了

$post

（或者

$\u post

，不管它应该是什么）。我刚把你的东西拿走了。我会编辑。

<script type="text/javascript">
    function showPagesDiv(val) {
        document.getElementById('single').style.display = (val == 'Single Spaced')? 'block' : 'none';
        document.getElementById('double').style.display = (val == 'Single Spaced')? 'none' : 'block';
    }
</script>