2016-08-21 139 views
0

我有一個HTML頁面,當我改變選擇它得到這樣如何將新選項添加​​到jQuery中的選擇?

{"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"]}}} 

和JSON數據時我得到的數據,我追加div 3選擇:

  1. 名稱:項目=數量
  2. 名稱:arrayTaille =尺寸
  3. 名稱:=尺寸,這是一個最一切時間= NULL

,這是形象的人進一步解釋:

enter image description here

的問題是沒有選擇工作。

這是我的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 })); 
      }); 
     } 
    }); 
}); 
+0

你問,當你改變下拉的值,則不會觸發事件? 在上面的JSON對象中,沒有'arrayTaille'。 (查看最後一個循環) – Nabid

+0

所有事件都可以很好地工作,但是選擇項目和數組無法工作,它不會追加任何東西 –

+0

您能分享HTML代碼嗎? – trincot

回答

0

arrayTaille是在產品中,所以移動的eacharrayTaille選項爲data.products追加。

工作液

$("#categorySelected").change(function() { 
 
    var category = $("#categorySelected :selected").val(); 
 
    $("#Products").html(""); 
 

 
    $("#subCategorySelected option").remove(); 
 

 
    var data = { 
 
    "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"] 
 
     } 
 
    } 
 
    }; 
 
    $("#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>

相關問題