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

Я пытаюсь добавить новое значение в конце поля выбора опции. Число должно продолжаться, а не начинаться с 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_стандарт, он должен продолжать число, а не начинать снова с 1.

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

   option
    0
    1
    2
    3
    4
    5
    6
    1

Ожидаемый результат

option
0
1
2
3
4
5
6
7
8

Не уверен, чего вы пытаетесь достичь. Что такое функция removeStandard и когда она вызывается?

CodeThing 06.02.2019 11:30

Некоторая путаница. Что такое n_standard и как он устанавливается? Почему ваш for зацикливает Начало на значении select, а не на n_standard?

freedomn-m 06.02.2019 11:31

почему бы вам не добавить с помощью document.getElementById("selectBoxStandard").length

Mayur Patil 06.02.2019 11:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
83
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете запросить, сколько options в настоящее время имеет 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>

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

Используйте 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();

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

Другие вопросы по теме