Добавить новое значение в опцию выбора последнего значения

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 , он должен продолжать число вместо того, чтобы начинать с 1.

Вывод программы

   option
    0
    1
    2
    3
    4
    5
    6
    1

Ожидаемый вывод

option
0
1
2
3
4
5
6
7
8

Answer 1

Используйте select.length в своем коде, чтобы получить число <option> в <select>.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 2

Непонятно, что вы пытаетесь сделать.Но если вы пытаетесь увеличить опцию через цикл 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 .

Answer 3

Вы можете запросить, сколько option с select в настоящее время имеет и добавить это как смещение:

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>

В качестве альтернативы, вы можете установить начальное значение на максимальное значение, если могут быть пробелы.