将新值附加到选项选择最后一个值答案

【问题标题】：Append new value to option select last value将新值附加到选项选择最后一个值
【发布时间】：2019-02-06 10:25:57
【问题描述】：

我正在尝试在选项选择框的末尾附加新值。数字应该继续，而不是从 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的值填充选项的值，它应该继续数字而不是再次从1开始。

程序输出

预期输出

option
0
1
2
3
4
5
6
7
8

【问题讨论】：

不确定您要达到的目标。什么是 removeStandard 函数以及何时调用它？
有些混乱。什么是n_standard，它是如何设置的？为什么您的for 循环开始在select 值而不是n_standard？
为什么不附加 document.getElementById("selectBoxStandard").length

标签： javascript jquery ajax

【解决方案1】：

您可以查询select当前有多少options并将其添加为偏移量：

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>

或者，如果可能存在间隙，您可以将起始值设置为最大值。

【讨论】：

【解决方案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();

【讨论】：

【解决方案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 动态添加具有增加值的选项。

【讨论】：