html - 如何在 jQuery 中进行 HTML 选择

Question

我想在 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>

Answer 1

问题是因为您只检索了 val()页面加载时的选择。您需要在事件发生时获取该值，以便在用户单击按钮时匹配 DOM 中选择的值。
另外你需要移动remove()在附加 div 后调用, 否则选择 option在阅读之前被删除。
另请注意，在某些情况下，您将 jQuery 对象包装在另一个 jQuery 对象中。选择您的元素一次，并根据需要在事件处理程序中引用它们。
最后，你可以看看使用 length属性来确定您已附加到 DOM 而不是全局的元素数量 x多变的。

This is great, but it will continue to write null when the options run out

这很容易通过确保选择具有值来解决。
试试这个工作示例:

$(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>