时间戳

首页 > 解决方案 > Onchange 选择选项在另一个选择选项上显示结果

javascript - Onchange 选择选项在另一个选择选项上显示结果

问题描述

我创建了下面的代码来在选择值时执行 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>

标签： javascriptphp

解决方案

如果您正在查看控制台日志，则很容易找到答案。它会给你一个错误，它正在破坏。不过在此之前，您的 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>

在您的部分块中，将您的业务逻辑放在函数/类中或顶部。您不需要运行数据库两次，因为调用是相同的。此外，您的if语句产生的输出与else您的 html 错误或您误解了该脚本的作用相同：

<?php
# Start a string
$stropts = '';
# Call once
$query = $conn->query("SELECT  * FROM cww_avid_pages_words");

while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
    # Perhaps it's the "selected" that you are trying to determine with if/else??
    $selected = (!empty($post['no_of_pages']) && ($post['no_of_pages'] ==  $row['idpw']))? ' selected="selected"' : '';
    # Assemble a string
    $stropts .= '<option'.$selected.' id="' . $row['idpw'] . 'nop" value="' . $row['idpw'] . '" title="' . $row['amount_added'] . '"> ' . $row['pages'] . ' Page(s) / ' . $row['words'] . ' Words</option>';
}
?>
<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()">
                <!-- Just echo the string here -->
                <?php echo $stropts ?>
            </select>
        </div>
        <div id="double" >
            <select name="no_of_pages2" id="no_of_pages2" onchange="caltotal()">
                <!-- Just echo the string here -->
                <?php echo $stropts ?>
            </select>
        </div>
    </div>
</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>

推荐阅读