我們如何通過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間客房的選擇框一個，和其他的人，我們有一個房間列表，但我們要根據房間的大小，更新的人，如果我們有一個房間的類型「3」那麼這個房間的人將被允許爲6,7,8,9。

Persons的選項將相應地改變。請提供合適的解決方案感謝杆

來源

2012-01-25 PPS

'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間不同的變量和客房。僅僅因爲你在首都有第二個變量並不意味着它是一個不同的變量。此外，你有一個無限的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

在jsfiddl.net

<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創建另一個帶有選項的選擇框

回答

相關問題