Onchange select 选项在另一个 select 选项上显示结果

Question

我已经创建了下面的代码以执行ZC1C425268E68385D1AB5074C17A94F14F ONCHANGE，当时选择了Z999382F04071859941E18F18F16EFCF16EFCF42Z时。

我希望看到第二个Z999382F04071859941E18F16EFCF42Z选项更改时，选择了第一个Z9999382F04071859941E18F16EF16EFCF16EFCF42Z选项。

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

<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>

下面是第二个 select 选项，由于第一个 select 选项的更改而更改

<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>

Answer 1

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