JQueryでいくつかのオプションを使って別の選択ボックスを作成する方法

選択ボックスの値から別の選択ボックスを作成したいとします。 JqueryによってJQueryでいくつかのオプションを使って別の選択ボックスを作成する方法

このコードを適用しており、現時点では機能していません。

<script src="http://code.jquery.com/jquery-1.5.min.js"></script> 
<script> 
    $(document).ready(function() { 
    var rooms = $("#rooms"); 
    var ROOMS = rooms.val() ; 

    var max_adults_a = 3; 
    var min_adults_a = 2; 

    var max_adults = max_adults_a; 
    var min_adults = min_adults_a; 
    var num = min_adults * ROOMS; 
    ROOMS.change(function() { 
     while (num <= max_adults_a * ROOMS) { 
     $('#person').append($('<option></option>').val(num).html(num) 
    )}; 
    }); 
}); 
</script> 
</head> 
<body> 
    <h1>Populating Select Boxes</h1> 
    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> 
    </select> 
    person 
    <select name="person" id="person"> 
    </select> 
</body>

我々は2セレクトボックス部屋に1つ、そして人のために他を持って、私たちは部屋のためのリストを持っているが、我々は、客室タイプ「3」を持っている場合は、部屋の大きさに応じ者を更新する必要があります人はこの部屋のために許可されます6,7,8,9です。

人物のオプションは適宜変更されます。私に適したソリューションを提供してくださいおかげロッド

出典

2012-01-25 PPS

jsfiddl.netで 'category'はどこにも定義されていません。確かにこれは爆破する？ – davidchambers

私たちはコードを更新しましたが、コードにこのような誤りがいくつかありました。 – PPS

両方の選択ボックスのデフォルト値が空白の場合、最初に部屋タイプ3を選択すると、選択肢の値は人の選択ボックスの変更になります。 – PPS

$(document).ready(function() { 
    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(); 
});

出典

2012-01-25 07:40:58 xdazz

HTMLの部分は何ですか、それでも変わりませんか？ – PPS

@Rodgerはい、HTML部分は変わりません。 – xdazz

私にこのサポートをくれてありがとう、ありがとう – PPS

あなたは2つの異なる変数室と客室を宣言し、なぜ私にはわかりません。大文字で2番目の変数があるからといってそれが別の変数であるとは限りません。また、あなたは無限のwhileループを持っています。

はとにかく、ここにあなたが探しているものかもしれソリューションです：

<script src="http://code.jquery.com/jquery-1.5.min.js"></script> 
<script> 
    $(document).ready(function() { 

    var max_factor = 3; 
    var min_factor = 2; 

    $('#rooms').change(function() { 
     $('#person option').remove(); // Remove all existing options in person 

     var rooms = $("#rooms").val(); // Get the rooms value every time is it changed 

     for (var i = min_factor * rooms; i <= max_factor * rooms; i++) { 
     $('<option>').attr('value', i).html(i).appendTo('#person'); 
    )}; 
    }); 
}); 
</script> 
</head> 
<body> 
    <h1>Populating Select Boxes</h1> 
    Category: 
    <select name="rooms" id="rooms"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 
    person 
    <select name="person" id="person"> 
    </select> 
</body>

出典

2012-01-25 07:41:33 peter

<head> 
    <script src="http://code.jquery.com/jquery-1.5.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     var rooms = $("#rooms"); 
     var ROOMS = rooms.val() ; 

     var max_adults_a = 3; 
     var min_adults_a = 2; 

     var max_adults = max_adults_a; 
     var min_adults = min_adults_a; 

     $("#rooms").change(function() { 
      $('#person').html(""); 
      var selectedRoom = parseInt($("#rooms option:selected").val(), 10) 
      var num = min_adults * selectedRoom ; 
      while (num <= max_adults_a * selectedRoom) { 
      $('#person').append($('<option></option>').val(num).html(num)); 
      num++; 
      } 
     }); 
    }); 
    </script>  
</head> 
<body> 
    <h1>Populating Select Boxes</h1> 
    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> 
    </select> 
    person 
    <select name="person" id="person"> 
    </select> 
</body>

出典

2012-01-25 07:49:37

JQueryでいくつかのオプションを使って別の選択ボックスを作成する方法

答えて

関連する問題