Как выбрать HTML в jQuery

ProgramBox

Как выбрать HTML в jQuery

Post author:admin
Запись опубликована:10 декабря, 2022
Post category:Вопросы по программированию

#html #jquery

#HTML #jquery

Вопрос:

Я хочу выбрать несколько вариантов с помощью jquery. и возьмите значение выбранных параметров и запишите его в абзаце. Моя проблема в том, что он принимает только первый вариант и не принимает следующий выбранный вариант и возвращает только значение, полученное первым. Я должен написать это в

пока нет других вариантов. и мне нужно удалить выбранные параметры

 $(document).ready(function() {
  var max_fields = 26;
  var wrapper = $(".container1");
  var add_button = $(".add_form_field");
  var selectopion = $("#id_100 option:selected").val();
  var x = 1;
  $(add_button).click(function(e) {
    $("#id_100 option:selected").remove();
    e.preventDefault();
    if (x < max_fields) {
      var numbers = x  ;
      //add input box
      $(wrapper).append('<div><p>ID: '   selectopion   ' student</p></div>');
    } else {
      alert('The maximum number of students has been added');
    }
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<label for="day">Students</label>
<select name="students_info" class="form-control" id="id_100">
  <option value="6">6 || student</option>
  <option value="5">5 || student</option>
  <option value="4">4 || student</option>
  <option value="3">3 || student</option>
  <option value="2">2 || student</option>
  <option value="1">1 || student</option>
</select>

<input type="submit" name="button" id="submit_button" 
  class="btn btn-success add_form_field" value="Add">
<div class="container1 form-group"></div>

Развернуть фрагмент

1. Я не понимаю «добавить требование «.

2. Не по теме: for="day" должно быть for="id_100"

3. Цель: записать его в абзацах, пока выбор html не будет завершен

4. Не по теме 2: $(add_button).click(function (e) { должно быть add_button.click(function (e) { и $(wrapper).append для wrapper.append

5. select Не помечен как multiple , поэтому вы можете выбирать только один элемент за раз. Если вы хотите выбрать более одного за раз, добавьте multiple атрибут в HTML и используйте $('#id_100').val() для получения списка выбранных элементов.

Ответ №1:

Проблема заключается в том, что вы извлекаете val() из выбора только при загрузке страницы. Вам нужно получить это значение при возникновении события, чтобы оно соответствовало тому, что было выбрано в DOM, когда пользователь нажимает кнопку.

Кроме того, вам необходимо переместить remove() вызов в после добавления div , в противном случае выбранное option будет удалено до того, как оно будет прочитано.

Также обратите внимание, что в нескольких случаях вы оборачиваете объекты jQuery в другой объект jQuery. Выберите свои элементы один раз и при необходимости обратитесь к ним в обработчиках событий.

Наконец, вы можете использовать length свойство, чтобы определить, сколько элементов вы добавили в DOM вместо глобальной x переменной.

Это здорово, но он будет продолжать записывать null, когда закончатся параметры

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

Попробуйте этот рабочий пример:

 $(document).ready(function() {
  var max_fields = 26;
  var $wrapper = $(".container1");
  var $add_button = $(".add_form_field");
  var $select = $("#id_100");
  
  $add_button.click(function(e) {
    e.preventDefault();    
    
    let selectValue = $select.val();    
    if (!selectValue)
      return;
    
    if ($wrapper.children('div').length < max_fields) {
      $wrapper.append(`<div><p>ID: ${selectValue} student</p></div>`);
      $select.find('option:selected').remove();
    } else {
      alert('The maximum number of students has been added');
    }
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

<label for="day">Students</label>
<select name="students_info" class="form-control" id="id_100">
  <option value="6">6 || student</option>
  <option value="5">5 || student</option>
  <option value="4">4 || student</option>
  <option value="3">3 || student</option>
  <option value="2">2 || student</option>
  <option value="1">1 || student</option>
</select>

<input type="submit" name="button" id="submit_button" class="btn btn-success add_form_field" value="Add">
<div class="container1 form-group"></div>

Развернуть фрагмент