![](/img/trans.png)
[英]How to add new option to select if radiobutton is changed using jQuery
[英]How to add a new option to a select in jQuery?
当我更改选择时我有一个页面HTML像这样获取json数据
{"subCategories":{"433":"belt"},"products":{"435":{"Titre":"Ceinture r\u00e9versible unie 100% cuir","Modele":"CIBOBELT","Couleurs":0,"Marque":"CELIO","Prix":25.99,"PrixBarre":null,"ProductsId":435,"item":{"1":1,"2":2,"3":3,"4":4,"5":5},"arrayTaille":["TU"]},"436":{"Titre":"Coffret ceinture porte-cl\u00e9s et porte-cartes rayure","Modele":"CIBOTTOMAN","Couleurs":0,"Marque":"CELIO","Prix":35.99,"PrixBarre":null,"ProductsId":436,"item":{"1":1,"2":2,"3":3,"4":4,"5":5},"arrayTaille":["T1","T2","T3"]},"433":{"Titre":"Bo\u00eete cadeau ceinture","Modele":"BEBFLOCON","Couleurs":0,"Marque":"CELIO CLUB","Prix":30,"PrixBarre":null,"ProductsId":433,"item":{"1":1,"2":2,"3":3,"4":4,"5":5},"arrayTaille":["TU"]},"434":{"Titre":"Bo\u00eete cadeau ceinture","Modele":"BEBSCHUSS","Couleurs":0,"Marque":"CELIO CLUB","Prix":30,"PrixBarre":null,"ProductsId":434,"item":{"1":1,"2":2,"3":3,"4":4,"5":5},"arrayTaille":["TU"]}}}
当我得到数据时,我在div
后面附加了3个选择:
这是要解释更多的图像:
问题是没有选择工作。
这是我的JS代码:
$("#categorySelected").change(function() {
var category = $("#categorySelected :selected").val();
$("#Products").html("");
$("#subCategorySelected option").remove();
$.ajax({
type: 'get',
url : Routing.generate('front_office_get_category', {baseDomaine : baseDomaineJS , _locale: 'en',category:category}),
success: function(data) {
$("#subCategorySelected").append($('<option value="0">Choisir une sous catégorie</option>'));
$.each(data.subCategories, function(key,value) {
$("#subCategorySelected").append($('<option>',{ value : value , text: value }));
});
var html = "";
$.each(data.products, function(key,value) {
html+='<form action="#" method="POST" id="'+key+'"><input type="hidden" name="idProduct" value="'+key+'"><div class="col-md-4 col-sm-6 hero-feature"><div class="thumbnail"><a href="#" data-toggle="modal" data-target="#modal-pdt"> <img src="http://placehold.it/800x500" alt=""></a><div class="caption"><h3 class="media-heading">'+value.Titre+'</h3><p>'+value.Modele+'- '+value.Couleurs+'- '+value.Marque+'<br/></p><p><b>'+value.Prix+'</b><br/><b> </b></p><div class="row margin-bottom-10"><div class="col-xs-12 col-lg-12 margin-bottom-10"><select class="form-control" id="selectedItemm/'+value.ProductsId+'"></select></div><div class="col-xs-12 col-lg-12"><select class="form-control"><option>Dimension</option><option> 2</option><option> 3</option><option> 4</option></select></div></div><div class="row"><div class="col-xs-12 col-lg-4 margin-bottom-10"><select class="form-control" name="qte" id="selectedItem/'+value.ProductsId+'"></select></div><div class="col-xs-12 col-lg-8"><a href="#" id="'+key+'" name="add_panier_btn" class="btn-block btn btn-success">Réserver en magasin</a></div></div></div></div></div></form>';
$("#Products").html(html);
});
$.each(data.arrayTaille, function(key,value) {
$("#selectedItemm/"+value.ProductsId+"").append($('<option>',{ value : key , text: value }));
});
}
});
});
arrayTaille
在产品中,因此将arrayTaille
选项的追加移动到data.products
的each
选项内。
工作方案 :
$("#categorySelected").change(function() { var category = $("#categorySelected :selected").val(); $("#Products").html(""); $("#subCategorySelected option").remove(); var data = { "subCategories": { "433": "belt" }, "products": { "435": { "Titre": "Ceinture r\éversible unie 100% cuir", "Modele": "CIBOBELT", "Couleurs": 0, "Marque": "CELIO", "Prix": 25.99, "PrixBarre": null, "ProductsId": 435, "item": { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5 }, "arrayTaille": ["TU"] }, "436": { "Titre": "Coffret ceinture porte-cl\és et porte-cartes rayure", "Modele": "CIBOTTOMAN", "Couleurs": 0, "Marque": "CELIO", "Prix": 35.99, "PrixBarre": null, "ProductsId": 436, "item": { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5 }, "arrayTaille": ["T1", "T2", "T3"] }, "433": { "Titre": "Bo\îte cadeau ceinture", "Modele": "BEBFLOCON", "Couleurs": 0, "Marque": "CELIO CLUB", "Prix": 30, "PrixBarre": null, "ProductsId": 433, "item": { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5 }, "arrayTaille": ["TU"] }, "434": { "Titre": "Bo\îte cadeau ceinture", "Modele": "BEBSCHUSS", "Couleurs": 0, "Marque": "CELIO CLUB", "Prix": 30, "PrixBarre": null, "ProductsId": 434, "item": { "1": 1, "2": 2, "3": 3, "4": 4, "5": 5 }, "arrayTaille": ["TU"] } } }; $("#subCategorySelected").append($('<option value="0">Choisir une sous catégorie</option>')); $.each(data.subCategories, function(key, value) { $("#subCategorySelected").append($('<option>', { value: value, text: value })); }); $.each(data.products, function(key, value) { $("#Products").append('<form action="#" method="POST" id="' + key + '"><input type="hidden" name="idProduct" value="' + key + '"><div class="col-md-4 col-sm-6 hero-feature"><div class="thumbnail"><a href="#" data-toggle="modal" data-target="#modal-pdt"> <img src="http://placehold.it/800x500" alt=""></a><div class="caption"><h3 class="media-heading">' + value.Titre + '</h3><p>' + value.Modele + '- ' + value.Couleurs + '- ' + value.Marque + '<br/></p><p><b>' + value.Prix + '</b><br/><b> </b></p><div class="row margin-bottom-10"><div class="col-xs-12 col-lg-12 margin-bottom-10"><select class="form-control" id="selectedItemm' + value.ProductsId + '"></select></div><div class="col-xs-12 col-lg-12"><select class="form-cohttp://stackoverflow.com/questions/39063317/add-a-new-option-to-a-select-with-jquery#ntrol"><option>Dimension</option><option> 2</option><option> 3</option><option> 4</option></select></div></div><div class="row"><div class="col-xs-12 col-lg-4 margin-bottom-10"><select class="form-control" name="qte" id="selectedItem' + value.ProductsId + '"></select></div><div class="col-xs-12 col-lg-8"><a href="#" id="' + key + '" name="add_panier_btn" class="btn-block btn btn-success">Réserver en magasin</a></div></div></div></div></div></form>'); $.each(value.arrayTaille, function(key, value2) { $("#Products").find("#selectedItemm" + value.ProductsId).append($('<option>', { value: key, text: value2 })); }); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="categorySelected"> <option>foo</option> <option>bar</option> </select> <select id="subCategorySelected"> </select> <div id="Products"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.