时间戳

首页 > 解决方案 > Jquery在动态创建的选择上添加验证规则

javascript - Jquery在动态创建的选择上添加验证规则

问题描述

我无法动态添加所需的输入。尤其是“选择”输入

如果提交的输入正确，我已经尝试手动检查（wo Jquery validate），但我遇到了同样的问题。“必需”类也无济于事。

这是html：

<form id='myform'>
  <div>
    <div id="addRow">+</div>
    <div id="deleteRow">-</div>
  </div>
  <div>
    <table id="tableex">
      <tr>
        <td>
          <select name="selectbox[]" data-selected="" class='selectdyna required'>
        <option value="" selected="selected" disabled="disabled">env :</option>
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        </select>
        </td>
      </tr>
    </table>
  </div>

  <div>
    <input type='submit' value='Validate'>
  </div>
</form>

这是我的js：

$(document).ready(function() {
  $("#addRow").click(function() {

    var str = "<tr>\n" +
      "                <td id=\"selecttd\">\n" +
      "                    <select name=\"selectbox[]\" class='selectdyna required' data-selected=\"\">\n" +
      "                        <option value=\"\" selected=\"selected\" >env :</option>\n" +
      "                        <option value=\"1\">option1</option>\n" +
      "                        <option value=\"2\">option2</option>\n" +
      "                        <option value=\"3\">option3</option>\n" +
      "                    </select>\n" +
      "                </td>\n" +
      "            </tr>";
    $("#tableex").append(str)
     $('#myform').validate();
        $('.selectdyna').rules('add',  { 'required': true });
  })
  $("#deleteRow").click(function() {
    if ($("#tableex tr").length > 1) {
      $("#tableex tr:last").remove();

    } else {
      alert("there must been one line minimum.")
    }
  })
})

这是小提琴的链接：https ://jsfiddle.net/v3tj2c5u/

标签： javascriptjquery

解决方案

我不明白您为什么需要以这种方式使用下拉列表的名称。您可以按照以下演示进行操作

$(document).ready(function() {
  $("#addRow").click(function() {
   var count= $("#tableex tr").length+1;
    var str = "<tr>\n" +
      "                <td id=\"selecttd\">\n" +
      "                    <select name=\"selectbox"+count+"\" class='selectdyna required' data-selected=\"\">\n" +
      "                        <option value=\"\" selected=\"selected\" >env :</option>\n" +
      "                        <option value=\"1\">option1</option>\n" +
      "                        <option value=\"2\">option2</option>\n" +
      "                        <option value=\"3\">option3</option>\n" +
      "                    </select>\n" +
      "                </td>\n" +
      "            </tr>";
    $("#tableex").append(str)
     $('#myform').validate();
        $('.selectdyna').rules('add',  { 'required': true });
  })
  $("#deleteRow").click(function() {
    if ($("#tableex tr").length > 1) {
      $("#tableex tr:last").remove();

    } else {
      alert("there must been one line minimum.")
    }
  })
})

工作演示

推荐阅读