如何基于另一个选择选项禁用选择选项

Question

我有两个表， gender和names
名称表具有以下列表：
-男性名字从nameID 1到nameID 10
-从nameID 11到nameID 21的女性名字
-从nameID 23到nameID 31

性别表具有三个属性：
-女
-男
-两者

我正在使用引导程序选择选项，如果用户从性别选择选项中选择女性，我想显示从nameID11到nameID 21的名称，以此类推是否可行？我看到了其他帖子，我注意到他们使用的是javascript以前从未使用过javascript，可以用另一种方法达到相同的结果

tableGender
...................
性别ID（PK）
性别名称，可以是男性，女性或两者均可

tableNames
...................
名称ID（PK）
名称

 <?php
include "connection.php";

echo " <p> Gender </p>";
echo "<select class='form-control' name='gender'>";
echo "'<option value=''></option>";

$sql2 = mysqli_query($con, "SELECT * FROM tableGender");

while ($row2 = mysqli_fetch_array($sql2)) {



    echo '<option selected="selected"  value="' . $row2['genderID'] . '">' . $row2['genderName'] . "</option>";





}

echo "</select>";


echo " <p> Names </p>";
echo "<select class='form-control' name='name'>";
echo "'<option value=''></option>";

$sql = mysqli_query($con, "SELECT * FROM tableNames");

while ($row = mysqli_fetch_array($sql)) {



    echo '<option selected="selected"  value="' . $row['nameID'] . '">' . $row['name'] . "</option>";





}

echo "</select>";


?>

Answer 1

您可以使用jQuery仅显示想要的选择选项。 代码未经测试！

$("input[name=gender]").change(function() {
    var gender = this.value;
    $("input[name=name] option").each(function() {
        if ((gender == "your-male-id" && this.value >= 1 && this.value <= 10) ||
            (gender == "your-female-id" && this.value >= 11 && this.value <= 20) ||
            (gender == "your-both-id" && this.value >= 21 && this.value <= 30)
        ) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });
})