Question

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

要求是：

用户可以使用+和 - 按钮添加任意数量的行，每行应包含2个下拉列表和一个文本框。
每行的第二个下拉列表应显示一个列表，该列表相对于该行第一个下拉列表中选择的选项。我有一个单线工作（可以在附加的JSFiddle中看到）但不适用于多行。
此外，如果在第一个下拉列表中选择的选项是“日期”（或类似），则文本框（行上的第3项）应更改为其他类，以便在单击时显示日期选择器on（我已经有了datepicker的代码，但不知道如何更改字段的类）

我不得不承认我对Jquery不太热，但是在这个网站上使用了其他一些例子，我已经能够提出以下例子。

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

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

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

我意识到代码是一团糟，因为我拼凑了多个例子中的位。欢迎任何建议/反馈：）

Please click here for JsFiddle

Answer 1

由于您正在处理动态创建的元素，因此最好使用类而不是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/

使用Jquery的依赖关系的下拉菜单数组

1 个答案: