0

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

依此类推，每次我单击“添加大小”按钮。如果用户选择颜色，应该会发生相同的流程。

现在这是困难的部分，如果用户首先选择“尺寸和颜色”，如您在图像中看到的那样，我应该先询问用户尺寸值然后颜色值，然后我应该根据这些值进行变化，如图所示结束

这就是我想做的

4

2 回答 2

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
        }   
    });
于 2013-09-08T17:10:18.137 回答
1

那是你要找的吗？

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/

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

谢谢。

于 2013-09-08T17:30:03.020 回答