时间戳

首页 > 解决方案 > 更改多个下拉项目及其输入

javascript - 更改多个下拉项目及其输入

问题描述

我正在尝试创建一个查询构建器，并且我有一个简单的下拉列表，当添加它时，会创建一个输入文本或另一个下拉列表，如下面的小提琴所示（通过剪切代码的相关部分来简化）：

https://jsfiddle.net/12aLc85q/

在第一个添加的表格行中，我可以以各种方式操作框，但是当我添加第二个时，它不会改变。我在 js 方面不是那么有经验，但我知道我将更改事件放在了我的 .add 函数中，但是我找不到任何其他方法来让它工作，即使是这种错误的方式。知道我在这里缺少什么吗？

这是代码：

$(document).ready(function()
{

    var main_search_type = 'summary_results';
    var count = 0;
    var and_or_count = 0;

    $(document).on('click', '.add', function ()
    {
        $(function()
        {
            $("#options").change(function()
            {
                console.log($(this).find(":selected").val())

                if ($(this).find(":selected").data("rate") != "Duplicated")
                {
                    $("#item_id").replaceWith
                    (
                        '<input type="text" name="item_name" id = "item_id" class="form-control item_name"  placeholder="Phlyum Name"'+'>'
                    );
                    $("#item_id").attr("placeholder", $(this).find(":selected").data("rate"));

                }
                else
                {
                    $("#item_id").replaceWith
                    (
                        '<select id="item_id" name="item_name" class="form-control">' +
                        '<option value="true">True</option>' +
                        '<option value="false">False</option>'
                    );
                }

            });
        });

        var html = '';
        if (main_search_type == "summary_results")
        {

        html += '<tr>';
            html +=
                '<td><select name="summary_results" id="options" class="form-control">' +
                '<option placeholder="Phylum Name" name="summary_results" data-rate = "Phylum Name" value="phylum">Phylum</option>' +
                '<option data-rate = "Genus Name" name="summary_results" value="genus">Genus</option>' +'<option data-rate = "Duplicated" value="organism">Organism</option>'
                '</select></td>'
                count++;
        }
       
        if(count != 0)
        {
        html += '<td><input type="text" name="item_name" id = "item_id" class="form-control item_name"  placeholder="Phlyum Name"'+'></td>';
        html += '</tr>';
        $('tbody').append(html);
        }
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
    <br />
    <div class="container">
      <h4 align="center">Select Main Categories</h4>
        <form method="POST" id="insert_form", name="insert_form_name">
        <div class="table-repsonsive">
          <table class="table table-bordered" id="item_table">
            <thead>
              <tr>
                <th>Search Option</th>
                <th>Enter Search Term</th>
                <th><button type="button" name="add" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span> Add Term</button></th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        <input type='hidden' name='db_types' id='db_types'>
          <div align="center">
              <span id="error"></span>
          </div>
      </form>
    </div>
  </body>

标签： javascripthtmljquery

解决方案

您不能有重复的 ID。因此，我建议使用重复的 ID（即：options 和 item_id）作为类名。

此外，不要在文档点击时添加和事件监听器。改用委托格式。

片段：

var main_search_type = 'summary_results';
var count = 0;
var and_or_count = 0;

$(document).on('click', '.add', function () {
    var html = '';
    if (main_search_type == "summary_results") {
        html += '<tr>';
        html +=
                '<td><select name="summary_results" class="form-control options">' +
                '<option placeholder="Phylum Name" name="summary_results" data-rate = "Phylum Name" value="phylum">Phylum</option>' +
                '<option data-rate = "Genus Name" name="summary_results" value="genus">Genus</option>' +'<option data-rate = "Duplicated" value="organism">Organism</option>'
        '</select></td>'
        count++;
    }

    if(count != 0) {
        html += '<td><input type="text" name="item_name"  class="form-control item_name item_id"  placeholder="Phlyum Name"'+'></td>';
        html += '</tr>';
        $('tbody').append(html);
    }
});

$(document).on('change', 'select.options', function() {
    console.log($(this).find(":selected").val())

    if ($(this).find(":selected").data("rate") != "Duplicated") {
        $(this).closest('td').next().find('.item_id').replaceWith(
                '<input type="text" name="item_name"  class="form-control item_name item_id"  placeholder="Phlyum Name"'+'>'
        );
        $(this).closest('td').next().find('.item_id').attr("placeholder", $(this).find(":selected").data("rate"));

    } else {
        $(this).closest('td').next().find('.item_id').replaceWith(
                '<select  name="item_name" class="form-control item_id">' +
                '<option value="true">True</option>' +
                '<option value="false">False</option>'
        );
    }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br />
<div class="container">
    <h4 align="center">Select Main Categories</h4>
    <form method="POST" id="insert_form", name="insert_form_name">
        <div class="table-repsonsive">
            <table class="table table-bordered" id="item_table">
                <thead>
                <tr>
                    <th>Search Option</th>
                    <th>Enter Search Term</th>
                    <th><button type="button" name="add" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span> Add Term</button></th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
            <input type='hidden' name='db_types' id='db_types'>
            <div align="center">
                <span id="error"></span>
            </div>
        </div>
    </form>
</div>

推荐阅读