0

我正在尝试用 HTML/Jquery 编写动态表单，目的是允许用户动态构建查询（将用于编写 SQL 语句）。注意：表单将发布到 PHP 页面，该页面将生成 MySQL。

要求是：

  • 用户可以使用 + 和 - 按钮添加任意数量的行，每行应包含 2 个下拉菜单和一个文本框。

  • 每行的第二个下拉菜单应显示一个列表，该列表与该行第一个下拉菜单中选择的选项相关。我已经为单行工作（如附加的 JSFiddle 中所见），但不适用于多行。

  • 此外，如果在第一个下拉列表中选择的选项是“日期”（或类似），则文本框（行上的第 3 项）应更改为不同的类，以便在单击时显示日期选择器（我已经有了日期选择器的代码，但不知道如何更改字段的类）

我不得不承认我对 Jquery 并不太感兴趣，但是使用本网站上其他一些示例中的一些内容，我已经能够提出以下示例。

您会看到，在第一个下拉菜单中选择前 2 项中的一项时，您将在第二个下拉菜单中获得要更改的值，但是，这只适用于顶行。一旦您添加另一行，前几行的依赖关系就会丢失。

我用于下拉依赖项的代码是：

$("#company").change(function() {
    $('select[name="product"]').removeAttr("name").hide();
    $("#" + $(this).val()).show().attr("name", "product");
});

我意识到代码是一团糟，因为我拼凑了来自多个示例的位。欢迎任何建议/反馈:)

请点击这里查看 JsFiddle

4

1 回答 1

0

由于您正在处理动态创建的元素，因此最好使用类而不是 jQUery 选择器的 id 属性。将您的标记更改为：

<select id='company' name='company' class="company">

和 ...

<select id='Title' name='product' class="Title">

然后你可以使用：

function () {
    var self = $(this),
        val = self.val(),
        ddl = self.siblings('select.' + val);
    self.siblings('select').removeAttr("name").hide();
    ddl.show().attr("name", "product");
}

作为你的处理程序。您还 [可能] 想要使用事件委托来确保处理程序在绑定处理程序后创建的元素上运行：

 $(document).on('change', 'select.company', function () {
     var self = $(this),
         val = self.val(),
         ddl = self.siblings('select.' + val);
     self.siblings('select').removeAttr("name").hide();
     ddl.show().attr("name", "product");
 });

演示：http: //jsfiddle.net/QkPsJ/1/

更新

抱歉，我错过了问题的那一部分。要添加一个datepicker类，只需将其添加到处理程序中：

if (val === "DateCreated") {
    self.siblings('input.next').addClass('ui-datepicker');
    //init datepicker
} else {
    //destroy datepicker
    self.siblings('input.next').removeClass('ui-datepicker');
}

更新小提琴：http: //jsfiddle.net/QkPsJ/2/

于 2013-10-28T10:27:29.720 回答