將新值附加到選項中選擇最后一個值

Question

我試圖在選項選擇框的末尾附加新值。 該數字應繼續而不是從1開始。

 var n_standard = 1; function removeStandard() { var select = document.getElementById('selectBoxStandard'); for (var i = Number($("#selectBoxStandard").val()); i <= n_standard; i++){ var opt = document.createElement('option'); opt.value = i; opt.innerHTML = i; select.appendChild(opt); } } 

 <label for="rooms" style="color:black">No. of rooms: </label> <select required tabindex="10" id="selectBoxStandard" name="n_rooms"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> 

此javascript代碼將根據n_standard的值填充option的值，它應繼續編號而不是從1開始。

程序輸出

   option
    0
    1
    2
    3
    4
    5
    6
    1

預期產量

option
0
1
2
3
4
5
6
7
8

Answer 1

您可以查詢select當前具有多少個option ，並將其添加為偏移量：

var offset = select.find("option").length;
opt.value = i + offset;

 var n_standard = 1; function removeStandard() { var select = $('#selectBoxStandard'); var offset = select.find("option").length; // not clear why you would start at 5 and check 5<=1 which will always give nothing // so for demo, always adds one item (so doesn't need the loop) // change n_standard to add more than one at a time //for (var i = Number(select.val()); i <= n_standard; i++) { for (var i = 0; i < n_standard; ++i) { var opt = document.createElement('option'); opt.value = i + offset; opt.innerHTML = i + offset; select.get(0).appendChild(opt); } } $("#b").click(removeStandard); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="rooms" style="color:black">No. of rooms: </label> <select required tabindex="10" id="selectBoxStandard" name="n_rooms"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> </select> <button id='b'>click me</button> 

或者，如果有間隙，可以將起始值設置為最高值。

Answer 2

在代碼中使用select.length獲取<select>中<option>的數量。 https://www.w3schools.com/jsref/prop_select_length.asp

var n_standard = 1;
function removeStandard(){
 var select = document.getElementById('selectBoxStandard');
  for (var i = Number($("#selectBoxStandard").val()); i< n_standard; i++){
    var opt = document.createElement('option');
    opt.value = select.length;
    opt.innerHTML = select.length;
    select.appendChild(opt);
  }
}

removeStandard();

Answer 3

目前尚不清楚您要做什么。 但是，如果您嘗試通過該for循環來增加選項，請嘗試以下操作：

var n_standard = 9;
var select = document.getElementById('selectBoxStandard');
for (var i = Number(select.value); i <= n_standard; i++) {
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);}

這將動態添加基於n_standar增加值的選項。