0

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

请查看我们为我们的程序申请的代码。

<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 时更新此值，an 选项的值为 (2 3)，我们只需将这些值分成两部分，较高的部分将放入“var max_adults” ，而较低的将转到“var min_adult”。

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

4

1 回答 1

2

您需要将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;
}
于 2012-01-30T09:10:44.927 回答