时间戳

首页 > 解决方案 > 如何在 jQuery 中进行 HTML 选择

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

问题描述

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

标签： htmljquery

解决方案

val()问题是因为您仅在页面加载时检索选择的。您需要在事件发生时获取该值，以便它与用户单击按钮时在 DOM 中选择的内容相匹配。

此外，您需要在附加之后将调用remove()移至，否则在读取所选内容之前将其删除。divoption

另请注意，在某些情况下，您将 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>

推荐阅读