当满足其他选择菜单值时取消隐藏选择菜单 - jQuery

Unhide select menu when other select menu value is met - jQuery

本文关键字：选择 菜单 隐藏 jQuery 取消 满足 其他      更新时间：2023-09-26

我想根据所选的选项值显示更多选择菜单。我尝试用jQuery这样做，但无济于事。目前，我使用 CSS 隐藏了额外的选择菜单，然后想根据设置的值取消隐藏选择菜单。例如，如果选择了 3 个人，则会出现三个选择菜单，以便用户可以设置该人的年龄。

演示 http://jsfiddle.net/FnqF7/2/

j查询：

$('#numOfpeople').change(function () {
    if ($(this).val() == 1) {
        $("#person1").show();
    }
    if ($(this).val() > 1) {
        $("#person2").show();
    }
    if ($(this).val() > 2) {
        $("#person3").show();
    }
    if ($(this).val() > 3) {
        $("#person4").show();
    }
    if ($(this).val() > 4) {
        $("#person4plus").show();
    }
});

<div id="row">
    <label for="numOfpeople">Num of People:</label>
    <select name="people" id="numOfpeople">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>
<div id="Person1" class="hide-row">
    <label for="people1">Person1:</label>
    <select name="people1" id="peoople">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>
<div id="Person2" class="hide-row">
    <label for="people2">Person2:</label>
    <select name="people2" id="peoople">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>
<div id="Person3" class="hide-row">
    <label for="people3">Person3:</label>
    <select name="people3" id="peoople">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>
<div id="Person4" class="hide-row">
    <label for="people4">Person4:</label>
    <select name="people4" id="peoople">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</div>

div ID 带有大写的 P。在 jQuery 中，你用一个非大写的 P 请求它。

这就是为什么你从不从大写开始;)

你有错别字错误，工作小提琴

$("#person1").show();// you have small p
$("#Person1").show();//change to capital P

试试这个：

$('#numOfpeople').change(function () {
    var val = $(this).val();
    if(val > 0){
        if(val > 4){
            $("#person4plus").show();
        }        
        else{
            $("#Person"+val).show(); // made "p" capital
        }
    }
});

演示

这是工作示例演示

$('#numOfpeople').change(function () {
 var val = $(this).val();
 if (val > 0) {
    if (val > 4) {
        $("#person4plus").show();
    } else {
        var i;
        for (i = 1; i <= parseInt(val); i++) {
            $("#Person" + i).show();//make a p Capital
        }
    }}
});

我们通常会犯的简单错误:)

$('#numOfpeople').change(function () {
if ($(this).val() == 1) {
    $("#Person1").show();
}
if ($(this).val() > 1) {
    $("#Person2").show();
}
if ($(this).val() > 2) {
    $("#Person3").show();
}
if ($(this).val() > 3) {
    $("#Person4").show();
}
if ($(this).val() > 4) {
    $("#Person4plus").show();
}
});
相关文章：