使用JS根据输入选择自动附加新行

时间:2017-08-20 17:36:32

标签: javascript html handlebars.js mustache

我希望添加类似于expedia和hotels.com以及其他类似网站的功能,当您选择房间数量时,它会为您提供每个房间有多少成人和儿童的选项。如果您选择孩子,它也允许您选择每个孩子的年龄。请参阅下面的图片作为示例。我愿意使用像把手或小胡子一样的东西。

有关工作示例,请访问https://www.voltcloud.io/

在选择多个房间或儿童之前显示第一张图片。 example

第二张图片显示了多个房间和儿童。 The first image shows before selecting multiple rooms or children.

1 个答案:

答案 0 :(得分:0)

你应该做的是

  1. 为房间创建模板
  2. 为儿童年龄创建另一个模板。
  3. 然后在选择房间数后,您可以渲染与房间数量相同的房间模板。

    然后在孩子的年龄重复相同的过程。

    您需要注意的数据是模板插入的每个输入的属性名称或ID,因为这需要与后端将表单反序列化的方式相匹配。

    像.net mvc这样的一些框架就有这样的约定,比如你要发布一个对象数组" name"属性必须像

    name = "[X].Adults"
    

    如果您需要一个代码示例来进一步解释我上面所说的内容,请告诉我,但如果您按照我提到的步骤进行操作,您应该能够非常快速地开发表单。

    ----新----

    在下面找到一个链接,其中包含我上面解释的简单示例。请记住,这是一个模型,但与您需要做的非常相似:

    https://codepen.io/santiagobenitez/pen/ZJxMJP