文章/答案/技术大牛

发布

社区首页 >问答首页 >具有动态选项的JQuery动态选择字段

问具有动态选项的JQuery动态选择字段
EN

Stack Overflow用户

提问于 2017-02-17 16:00:02

回答 2查看 2.6K关注 0票数 0

我是JQuery的新手，我对动态表单有问题。我想创建一个动态字段，在那里用户将能够创建他想要的任意多的字段。不幸的是，在第一个字段之后生成的第二个字段的选项与包装器中的每个动态字段相关。我怎么才能修复它呢？

提前感谢您--我将感谢您的每一个答复！

<div class='input_fields_wrap'>
<button class='add_field_button'>Add more fields</button>
<div>
    <label for='service'>Usługa</label>
    <select name='service' class='service'>
        <option value='Wybierz' selected>Wybierz</opiton>
        <option value='Listy'>Listy</option>
        <option value='Paczki'>Paczki</option>
    </select>
    <select name='type' class='type'></select>

</div>

<script>
  $(document).ready(function() {
    var listy = [
                 {display: 'A', value: 'A'},
                 {display: 'B', value: 'B'}];
    var paczki = [
                  {display: 'C', value: 'C'},
                  {display: 'D', value: 'D'}];

    var max_fields = 20;
    var wrapper = $('.input_fields_wrap');
    var add_button = $('.add_field_button');
    var x = 1;

    $(add_button).click(function(e){
        e.preventDefault();
        if(x<max_fields){
            x++;
            $(wrapper).append("<div><label for='service'>Usługa</label>" +
                              "<select name='service' class='service'>" +
                              "<option value='Wybierz' selected>Wybierz</option>" +
                              "<option value='Listy'>Listy</option>" +
                              "<option value='Paczki'>Paczki</option>" +
                              "</select><a href='#' class='remove_field'>Remove</a>" +
                              "<select name='type' class='type'></select>" +
                              "</div>");
        }
    });

    $(wrapper).on('click', ".remove_field", function(e){
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    });
    $('.service').change(function(e){
        e.preventDefault();
        var parent = $(this).val();
        switch(parent){
            case 'Listy':
                list(listy);
                break;
            case 'Paczki':
                list(paczki);
                break;
        }
    });

    function list(array_list){
        $('.type').html("");
        $(array_list).each(function(i){
            $('.type').append("<option value="+array_list[i].value+">"+array_list[i].display+"</option>");
        });
    }

});

javascript

jquery

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-02-17 16:10:41

将$('.service').change(function(e){更改为$(wrapper).on('change', '.service', function(e) {

$('.service').change(function(e){将只监听当时存在的类。后者是.on()，它侦听包装器，并在.service发生变化时执行。

我在你的代码中注意到，当你改变一个类型时，所有的类型都会被替换。您可以通过向list函数添加一个参数来修复此问题。但是，如果需要这样做，只需用'.type'替换element

这看起来像这样

  $(wrapper).on('change', '.service', function(e) {
    e.preventDefault();
    var parent = $(this).val();
    switch (parent) {
      case 'Listy':
        list(listy, $(this).next().next());
        break;
      case 'Paczki':
        list(paczki, $(this).next().next());
        break;
      // TODO: add case for Wybierz
    }
  });

  function list(array_list, element) {
    $(element).html("");
    $(array_list).each(function(i) {
      $(element).append("<option value=" + array_list[i].value + ">" + array_list[i].display + "</option>");
    });
  }

解决方案

$(document).ready(function() {
  var listy = [
               {display: 'A', value: 'A'},
               {display: 'B', value: 'B'}];
  var paczki = [
                {display: 'C', value: 'C'},
                {display: 'D', value: 'D'}];

  var max_fields = 20;
  var wrapper = $('.input_fields_wrap');
  var add_button = $('.add_field_button');
  var x = 1;

  $(add_button).click(function(e) {
      e.preventDefault();
      if (x < max_fields) {
        x++;
        $(wrapper).append("<div><label for='service'>Usługa</label>" +
          "<select name='service' class='service' <!-- here -->" +
          "<option value='Wybierz' selected>Wybierz</option>" +
          "<option value='Listy'>Listy</option>" +
          "<option value='Paczki'>Paczki</option>" +
          "</select><a href='#' class='remove_field'>Remove</a>" +
          "<select name='type' class='type'></select>" +
          "</div>");
      }
    })
    // create a button by default
    .trigger('click')

  $(wrapper).on('click', ".remove_field", function(e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  });

  $(wrapper).on('change', '.service', function(e) {
    e.preventDefault();
    var parent = $(this).val();
    switch (parent) {
      case 'Listy':
        list(listy, $(this).next().next());
        break;
      case 'Paczki':
        list(paczki, $(this).next().next());
        break;
      // TODO: add case for Wybierz
    }
  });

  function list(array_list, element) {
    $(element).html("");
    $(array_list).each(function(i) {
      $(element).append("<option value=" + array_list[i].value + ">" + array_list[i].display + "</option>");
    });
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input_fields_wrap'>
<button class='add_field_button'>Add more fields</button>

票数 0

Stack Overflow用户

发布于 2017-02-17 16:19:16

事件委派允许我们将单个事件侦听器附加到父元素，该侦听器将为与选择器匹配的所有后代触发，无论这些后代现在存在还是将来添加。参考：https://learn.jquery.com/events/event-delegation/

您需要执行以下操作。

        $(wrapper).on('change','.service', function(e) {
            e.preventDefault();
            var parent = $(this).val();
            switch(parent){
                case 'Listy':
                    list(listy);
                    break;
                case 'Paczki':
                    list(paczki);
                    break;
            }
        });

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42292438

复制

相似问题

问具有动态选项的JQuery动态选择字段
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有动态选项的JQuery动态选择字段EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有动态选项的JQuery动态选择字段
EN