javascript - 带选择的动态表单输入
问题描述
尝试使用 itemz[] 处理动态表单字段。
我希望表单字段重复并从 json 对象中填充选择。
<!-- DYNAMIX ITEMS-->
<div class='container1'>
<tr>
<td>
<select id='itemz' name='itemz[]' class='itemz'> </select>
</td>
<td>
<input class='form-control' type='text' name='count[]' value=''>
<input class='form-control' type='hidden' name='weight[]' value='<?= $items['weight']; ?> '>
</td>
<!-- ADD MORE -->
<td>
<button class='add_form_field'>Add More</button>
</td>
</tr>
</div>
这是假设的 JS: 1)填充下拉列表,但它只填充第一个框,我尝试在课堂上使用 a for each 但没有运气。
2) 复制下拉列表,但不是在它添加它之后添加它,而是在第一个主 div 之前添加
<script>
// POPULATING THE DROP DOWN
var obj={
Prod:
<?php echo $products; ?>
};
for(var i=0;i<obj.Prod.length;i++)
{
var option=$('<option></option>').text(obj.Prod[i]['item']);
$( ".itemz" ).append(option);
}
// DUPLICATING THE DROP DOWNS
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".container1"); //Fields wrapper
var add_button = $(".add_form_field"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append("<tr><td><select id='itemz' name='itemz[]' class='itemz'></select></td> <td><input class='form-control' type='text' name='count[]' value=''><input class='form-control' type='hidden' name='weight[]' value=''> </td> <td><a href='#' class='remove_field'>Remove</a> </td></tr></div>"); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
这是我的 JSON 对象:
Prod:
[{"id":"1","item":"Piano","weight":"200"},{"id":"2","item":"Fridge","weight":"50"},{"id":"3","item":"Freezer","weight":"100"},{"id":"4","item":"Sofa","weight":"20"},{"id":"5","item":"Microwave","weight":"10"},{"id":"6","item":"Dining Table","weight":"40"},{"id":"7","item":"Coffee Table","weight":"20"}]
};
解决方案
var obj={
Prod:[
{
"id":"1",
"item":"Piano",
"weight":"200"
},{
"id":"2",
"item":"Fridge",
"weight":"50"
},{
"id":"3",
"item":"Freezer",
"weight":"100"
},{
"id":"4",
"item":"Sofa",
"weight":"20"
},{
"id":"5",
"item":"Microwave",
"weight":"10"
},{
"id":"6",
"item":"Dining Table",
"weight":"40"
},{
"id":"7",
"item":"Coffee Table",
"weight":"20"
}
]
};
var max_fields= 10;
var curent_fields=0;
function add_options(_el){
for(var key in obj.Prod){
var text=obj.Prod[key].item;
var id=obj.Prod[key].id;
var weight=obj.Prod[key].weight;
var el =$('<option/>').text(text).val(id).attr('weight',weight);
$(_el).append(el);
}
}
function add_controls(){
if(curent_fields>=max_fields){
alert('max feilds '+max_fields);
return false;
}
$('.container1').append('<tr><td><select name="itemz[]" class="itemz"></select></td><td><input class="form-control" type="text" name="count[]" value=""><input class="form-control" type="hidden" name="weight[]" value=""><a href="javascript:void(0)" class="remove_field">Remove</a></td><td>');
add_options($('.itemz').last());
$('.itemz').last().change(function(){
select_change(this);
});
$('.itemz').last().parent().next().find('.remove_field').click(function(){
$(this).parent().parent().remove();
curent_fields--;
});
curent_fields++;
}
function select_change(_el){
var curent_weight=$(_el).children(':selected').attr('weight');
var curent_id=$(_el).children(':selected').val();
var curent_item=$(_el).children(':selected').text();
//set hidden feid value
$(_el).parent().next().find('[name^="weight"]').val(curent_weight);
//your more code...
console.log([curent_id,curent_weight,curent_item]);
}
function start(){
add_options($('.itemz').last());
$('.itemz').last().change(function(){
select_change(this);
});
}
start();
$('.add_form_field').click(function(){
add_controls();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='container1'>
<tr>
<td>
<select id='itemz' name='itemz[]' class='itemz'> </select>
</td>
<td>
<input class='form-control' type='text' name='count[]' value=''>
<input class='form-control' type='hidden' name='weight[]' value=''>
</td>
<!-- ADD MORE -->
<td>
<button class='add_form_field'>Add More</button>
</td>
</tr>
</div>
推荐阅读
- angularjs - 在 Internet Explorer 11 中查看 PDF
- python - 如何从 json 查询中获取和打印特定数据?
- java - 如何合并两个ArrayList
- javascript - Javascript 变量在 obejct 中不起作用。但是上console.log
- python - matplotlib 中带有欧元符号的刻度
- c# - 如何使用扩展 WPF 工具包创建简单的饼图
- java - 总是/只添加一次到 Intent.ACTION_VIEW
- algorithm - 旅行推销员中的贪婪方法 VS 动态规划
- sass - 有没有根据窗口大小改变元素高度的好方法?
- json - Angular i18n json 文件中的自动比较检查