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

Question

我有两个表gender和names
names表有以下列表:
-男性姓名从nameID 1到nameID 10
-女性姓名从nameID 11到nameID 21
-两者都从nameID 23到nameID 31

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

我正在使用引导选择选项，我想显示从nameID11到nameid21的名称，如果用户从gender选择选项中选择女性，等等，这是可能的吗？我看到其他帖子，我注意到他们使用javascript，我从来没有使用过javascript，我可以达到同样的结果，用另一种方法

表性别
...................
genderID(PK)
genderName它可以是男性、女性或两者兼而有之

表名
...................
名称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只显示您想要的select-options。代码未经测试！

$("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();
        }
    });
})