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