Question

我是jsp和jquery的新手我的代码创建了动态文本框和一个基于点击按钮的下拉菜单，

创建文本框后如果用户在动态添加文本框后选择选项，我想再添加一个文本框。

添加代码有效，但选择男性选项时的文本框不起作用。

请帮助。

这是我的代码

<body>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <br />
    <div class="container">
        <h3 align="center">Change Control Board (CCB)</h3>
        <br />
        <h4 align="center">Enter Change Details</h4>
        <br />
        <form name="form1" method="GET" action="jsv" id="form1">
            <div class="table-repsonsive">
                <span id="error"></span>
                <table class="table table-bordered" id="item_table">
                    <tr>
                        <th>Enter Change Name</th>
                        <th>Enter Change Description</th>
                        <th>Enter Change GW</th>
                        <th>Enter Change AW</th>
                        <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
                    </tr>
                </table>
                <div align="center">
                    <input type="submit" name="submit" class="btn btn-info" value="Insert" />
                </div>
            </div>
        </form>
    </div>
</body>

</html>
<script>
    $(document).ready(function() {

        $(document).on('click', '.add', function() {
            var html = '';
            html += '<tr> name="change_name1[]"';
            html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
            html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
            html += '<td><input  type="text" name="change_GW[]" class="form-control change_GW" /></td>';
            html += '<td><input style="display:none;" id="business"  type="text" name="change_G[]" class="form-control change_GW" /></td>';

            html += '<td><select id="purpose" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';

            html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
            $('#item_table').append(html);
        });

        $(document).on('click', '.remove', function() {
            $(this).closest('tr').remove();
        });
    });

    $(document).ready(function() {
        $('#purpose').on('change', function() {
            if (this.value == '1') {
                $("#business").show();
            } else {
                $("#business").hide();
            }
        });
    });
</script>

Answer 1

首先，你在$html连接tr的第一行有一个错误，它应该是'<tr> name="change_name1[]"';，因为它应该是'<tr name="change_name1[]">';但是因为{{ 1}}属性不是name的有效attribute，您应该将其更改为唯一的tr。

我希望单击按钮生成的选择菜单和输入框不是多个，因为选择输入上有id属性，如果有多个选择框，则需要是唯一的，但由于未提及，您对事件绑定稍作修改，如下面的代码所示您必须将id属性从静态更改为动态，例如附加计数及其添加的ID，以便您希望它能解决您的问题。

您的最终脚本将如下所示

id

Answer 2

剪切此代码：

$('#purpose').on('change', function() {
  if ( this.value == '1')
    {
       $("#business").show();
    }
         else
    {
       $("#business").hide();
   }
}

并将其粘贴在$('#item_table').append(html);

后面

两个$（文档）.ready（）部分没有任何意义。在创建选择框之后，需要在附加事件处理程序（单击时）。

Answer 3

您正在运行时动态添加select.so，添加后选择您需要绑定它的更改事件。所以只需更改您的JavaScript代码

<script>
    $(document).ready(function(){
    counter=0;
    $(document).on('click', '.add', function(){
      counter=counter+1;
      var html = '';
     html += '<tr> name="change_name1[]"';
     html += '<td><input type="text" name="change_name[]" class="form-control change_name" /></td>';
     html += '<td><textarea name="change_desc[]" class="form-control change_desc rows="3"" /></td>';
     html += '<td><input  type="text" name="change_GW[]" class="form-control change_GW" /></td>';
     html += '<td><input style="display:none;" id="business_'+counter+'"  type="text" name="change_G[]" class="form-control change_GW" /></td>';

    html += '<td><select id="purpose_'+counter+'" name="sex-type" class="form-control item_unit"><option value="0">select</option><option value="1">male</option><option value="2">Passing on to a client</option></select></td>';

     html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
    $('#item_table').append(html);
    $('#purpose_'+counter).on('change', function() {
         if ( this.value == '1')
          {
            $("#business_"+counter).show();
          }
         else
        {
          $("#business_"+counter).hide();
         }

        });
    });




        $(document).on('click', '.remove', function(){
         $(this).closest('tr').remove();
        });

        });


    </script>

动态显示基于动态创建的下拉菜单的文本框

3 个答案: