【问题标题】:Dynamically changing dropdown options with other dropdown selection使用其他下拉选择动态更改下拉选项
【发布时间】:2014-04-01 20:12:57
【问题描述】:

我对 php 比较陌生,尤其是它的 jquery 方面。我想要做的是让用户在一个下拉框上的选择影响另一个框的选项。

第一个下拉菜单(第二个改变的输入)

<select class="form-control" id="form" name="form" required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

第二个下拉菜单(选项根据第一个下拉菜单中的输入而变化)

<select class="form-control" id="subject" name="subject" required>
<option value="English">English</option>
<option value="Maths">Maths</option>
<option value="Science">Science</option>
<option value="Geography">Geography</option>
<option value="History">History</option>
<option value="RS">RS</option>
<option value="BSEC">BSEC</option>
<option value="French">French</option>
<option value="German">German</option>
<option value="Spanish">Spanish</option>
<option value="Italian">Italian</option>
<option value="Latin">Latin</option>
<option value="Greek">Greek</option>
<option value="Art">Art</option>
<option value="3D Design">3D Design</option>
<option value="Drama">Drama</option>
<option value="Music">Music</option>
<option value="PE">PE</option>
</select>

理想情况下,如果选择的数字是 1 到 5,则仅显示从英语到希腊语的选项,但如果选择了 6 或 7,则仅显示从艺术到 PE 的选项。有人告诉我这可以在 javascript 或 jquery 中完成,但 jquery 会更快。如果可能的话,请您为我提供一个解决方案。

【问题讨论】:

标签: javascript php jquery forms


【解决方案1】:

此代码将为您完成这项工作。这不是一个干净的代码,我相信有一些更好的方法可以做到,但这是一个非常简单的方法:

$("#form").change( function() {
    if ( parseInt($(this).val()) < 6 ) {
        $("#subject").html('                               \
            <option value="English">English</option>       \
            <option value="Maths">Maths</option>           \
            <option value="Science">Science</option>       \
            <option value="Geography">Geography</option>   \
            <option value="History">History</option>       \
            <option value="RS">RS</option>                 \
            <option value="BSEC">BSEC</option>             \
            <option value="French">French</option>         \
            <option value="German">German</option>         \
            <option value="Spanish">Spanish</option>       \
            <option value="Italian">Italian</option>       \
            <option value="Latin">Latin</option>           \
            <option value="Greek">Greek</option>           \
            ');
    } else {
        $("#subject").html('                                 \
            <option value="Art">Art</option>                 \
            <option value="3D Design">3D Design</option>     \
            <option value="Drama">Drama</option>             \
            <option value="Music">Music</option>             \
            <option value="PE">PE</option>                   \
            ');
    }
});

顺便说一句,Jquery 与 PHP 无关。 Jquery 是一个在客户端运行而 PHP 在服务器端运行的 javascript 库。

【讨论】:

    猜你喜欢
    • 2021-03-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多