根据用户的选择，动态构建输入元素及其变体

Question

我需要构建一个界面，用户可以从SELECT元素中选择选项，然后根据他们的选择我应该动态添加元素。例如，假设我有这样的选择：

<select required="required" name="product_variation[variation]" id="product_variation_variation">
    <option value="1">Size</option>
    <option value="2">Color</option>
    <option value="3">Size & Color</option>
</select>

因此，如果用户选择第一个选项，那么我应该向他们展示三个INPUT，以便允许使用此变体写出产品的数量和价格，第二个选择也是如此，但如果您注意到第三个选择则是第三个选择有两个选项“尺寸和颜色”然后在这种情况下，我应该生成与这种情况下的选项一样多的INPUT：

size: XL
size: L
size: M
color: Red

在这种情况下，我应该以这种方式显示3个INPUT变体：

INPUT1: size: XL color: Red 
INPUT2: size: L color: Red
INPUT3: size: M color: Red

可以帮我解决这段代码吗？到目前为止，我只有从主SELECT元素中选择所选值的部分：

$("#product_create").on("change", "#product_variation_variation", function() {
    var that = $(this);
    var selected_item = that.find(":selected").val();

    if (selected_item === 1) {
        // build inputs for first option
    }   
});

更新

好的，我制作了一个模型，向你展示我需要的东西比你相信的更复杂。见下图：

现在根据用户检查“有变化吗？”时的图像我显示选择（在图像中的复选框下面）这很容易，我已经完成了。现在，根据用户从选择中选择的内容，我应该“动态”编写一些输入元素。基本上第一次应该只有一行意义

"Enter value for size 1" | "Enter price for size 1" | "Enter qty (quantity) for size 1"

现在，如果您注意到旁边有一个按钮，可以根据之前的选择添加更多行，所以如果用户点击按钮，那么应该有：

"Enter value for size 1" | "Enter price for size 1" | "Enter qty (quantity) for size 1"
"Enter value for size 2" | "Enter price for size 2" | "Enter qty (quantity) for size 2"

等每次点击“添加大小”按钮。如果用户选择颜色，则会发生相同的流程。

现在这里是困难的部分，如果用户选择“尺寸和颜色”，如图所示，我应该向用户询问尺寸值，然后是颜色值，之后我应该根据这些值进行变化，如图所示最后的图像

这就是我想做的事情

Answer 1

使用jquery append或prepend来创建元素。 附加

http://api.jquery.com/append/

前置

http://api.jquery.com/prepend/

小提琴

http://jsfiddle.net/NWWAG/

 $("#product_create").on("change", "#product_variation_variation", function() {
        var that = $(this);
        var selected_item = that.find(":selected").val();

        if (selected_item === 1) {
            $(".element").append('<input type="text" id="new-id" />'); //Appends
            $(".element").prepend('<input type="text" id="new-id" />'); //Appends
        }   
    });

Answer 2

是你在寻找什么？

var $select = $("#product_variation_variation");
$select.on("change", function() {
    var that = $(this),
        selected_item = that.val();

    if (selected_item === 1 || selected_item == 2) {
       insertInputs();
    }   
});

在这里工作小提琴：http://jsfiddle.net/NWWAG/1/

我希望它有所帮助并让您了解您想要创建的内容。

感谢。