如何在jQuery中为select添加新选项？

Question

当我更改select it get json数据时，我有一个HTML页面

{"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个选项：

1. name：item = quantity
2. name：arrayTaille = size
3. name：= dimension，这个是大部分时间= null

这是图片来解释更多：



问题是没有选择正在运作。

这是我的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 }));
            });
        }
    });
});

Answer 1

arrayTaille位于产品中，因此请移动arrayTaille each中data.products选项的附加内容。{/ 1}。

工作解决方案：

＆＃13;

＆＃13;

$("#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
      }));
    });

  });
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;