Question

我想知道我们如何安排三个选择框，有了一些选项，它将根据之前的选择框值进行配置。

请查看我们为我们的计划申请的代码。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {

var rtype = $("#rtype").val();
var rarray = rtype.split(' ');

var max_adults = rarray[1];
var min_adults = rarray[0];

//var max_adults = 3;
//var min_adults = 2;

$('#rooms').change(function(){
var room_num = $(this).val();
var options = '';
for (var i = min_adults * room_num; i <= max_adults * room_num; i++) { options += '<option value="'+i+'">'+i+'</option>' } $('#person').html(options); }); $('#rooms').change(); });
</script>

</head>
<body>Room Type <select name="rtype" id="rtype"><option Selected value="">Select</option><option value="2 3">Room 2-3</option> <option value="3 4">Room 3-4</option></select> Category: <select name="rooms" id="rooms"> <option Selected value="">Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option> </select>Persons<select name="person" id="person"> </select></body>

如果我们删除“rtype”ID的代码，并在此代码中输入硬编码值，则此代码正常工作正常。

var max_adults = 3;
var min_adults = 2;

但我们喜欢在更改“rtype”id时更新此值，a选项的值为（2 3），我们只需要将这些值拆分为两部分，较高的部分将放入“ var max_adults“，而较低的一个将转到”var min_adult“。

请给我正确的解决方案，我们如何安排相应的代码。

Answer 1

您需要将rtype代码放在change元素的#rooms事件处理程序中：

$(function () {

    $('#rooms').change(function(){

        //get the `#rtype` value
        var rtype = $("#rtype").val();

        //check to make sure the `#rtype` value isn't an empty string
        if (rtype != '') {

            var room_num   = $(this).val(),
                rarray     = rtype.split(' '),
                options    = '',
                max_adults = rarray[1],
                min_adults = rarray[0];

            for (var i = min_adults * room_num; i <= max_adults * room_num; i++) {
                options += '<option value="'+i+'">'+i+'</option>';
            }

            $('#person').html(options);

        } else {

            //since no `#rtype` value was found alert the user
            alert('Please Select a Room Type');

        }

    //trigger the change event by chaining rather than re-selecting the same element
    }).change();

});

更新

要在另一个元素发生更改时显示一个元素，请将其添加到document.ready事件处理程序：

$('#rtype').change(function () {

    //if a value has not been selected then hide the `#rooms` element, otherwise show it
    if (this.value == '') {
        $('#rooms').hide();
    } else {
        $('#rooms').show();
    }
});

然后，您需要为#rooms元素添加以下CSS：

#rooms {
    display : none;
}

我们如何通过Jquery将三个选择框排列成一个序列

1 个答案:

更新