0

いくつかのオプションを使用して、3 つの選択ボックスを配置する方法を知りたいのですが、前の選択ボックスの値に従って構成されます。

プログラムに適用したコードを見てください。

<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) です。これらの値を 2 つの部分に分割するだけで、高い方が「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他の要素が変更されたときに 1 つの要素が表示されるようにするには、これをイベント ハンドラーに追加します。

$('#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 に答える