我需要构建一个界面,用户可以在其中从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:

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"


等等,每次我单击“添加尺寸”按钮。如果用户选择颜色,则应该发生相同的流程。

现在这是最困难的部分,如果用户首先选择图像中显示的“大小和颜色”,则应先询问用户“大小”值,然后再询问“颜色”值,然后再根据这些值进行变化,如图像所示。结束

这就是我想做的

最佳答案

使用jquery追加或前置创建元素。
附加

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
        }
    });

09-25 20:48
查看更多