Question

我在选择下拉列表时运行ajax查询。这部分工作正常，成功地给了我正在寻找的数据。问题是我想将这些数据放入三个不同的下拉框中，每个下拉框都有自己的ID。

主要选择下拉列表

<select name="item_category" id="item_category" class="form-control">
  <option value="NA">-----</option>
  <option value="Blade">Blade</option>
  <option value="Component">Component</option>
  <option value="Handle">Handle</option>
  <option value="Misc">Clip</option>
</select>

AJAX

$("#item_category").change(function() {
    var option = $(this).val();

    //make the ajax call
    $.ajax({
        url: "{{ route('item.select') }}",
        type: 'GET',
        dataType: 'json',
        data: {type:option},
        success: function(data)
        {
            $.each(data, function(key, value) {
                if(key = 'models')
                //console.log(value);
                {
                    for (var i = 0; i < data.length; i++) {
                        console.log(value[0][i]);
                        $('#item_model').html('<option value="' +
                          data[0][i] +'">'+ data[0][i] +'</option>');
                    }
                }

            });
        }
    });
});

Dropdowns的

<select name="item_model" class="form-control" id="item_model">
   <option value="NA">NA</option>
</select>
<select name="item_type" class="form-control" id="item_type">
   <option value="NA">NA</option>
</select>
<select name="item_color" class="form-control" id="item_color">
   <option value="NA">NA</option>
</select>

响应数据

{
"models": [
    { "model": "Mini"},
    { "model": "Raven/Spartan"},
    { "model": "Titan" }
],
"types": [
    { "type": ""},
    { "type": "Drop Point NS"},
    { "type": "Drop Point S"},
    { "type": "Spear Point DS"},
    { "type": "Spear Point Full H S"
],
"colors": [
    { "color": ""},
    { "color": "Black"},
    { "color": "Black oxide"},
    { "color": "Matte TIN" }
    ]
}

我只是不知道Java / ajax足以确切地知道我的问题在哪里......这也让我在谷歌搜索时头疼。

我觉得我相当接近......还没有。

感谢您的帮助！

PS。我知道只有一个$ .each。我也不知道如何通过所有模型/类型/颜色合并循环。

Answer 1

我创建了一个片段，它将在ajax调用的一部分内部进行，但我对此进行了评论。

"types": [
     { "type": ""},
     { "type": "Drop Point NS"},
     { "type": "Drop Point S"},
     { "type": "Spear Point DS"},
     { "type": "Spear Point Full H S"
 ],

}缺失

  "types": [
     { "type": ""},
     { "type": "Drop Point NS"},
     { "type": "Drop Point S"},
     { "type": "Spear Point DS"},
     { "type": "Spear Point Full H S"}
  ],

$("document").ready(function(){
  $("#item_category").change(function() {
    var option = $(this).val();
        var data={
    "models": [
        { "model": "Mini"},
        { "model": "Raven/Spartan"},
        { "model": "Titan" }
    ],
    "types": [
        { "type": ""},
        { "type": "Drop Point NS"},
        { "type": "Drop Point S"},
        { "type": "Spear Point DS"},
        { "type": "Spear Point Full H S"}
    ],
    "colors": [
        { "color": ""},
        { "color": "Black"},
        { "color": "Black oxide"},
        { "color": "Matte TIN" }
        ]
    };

      //inside ajax success call 
    if(data.models && data.types && data.colors){    
         var html="";
         for (var i = 0; i < data.models.length; i++) {
         html=html+'<option value="' +
                          data.models[i].model +'">'+ data.models[i].model +'</option>';
            
         }
         $('#item_model').html(html);
      }
  });
})



  




    //make the ajax call
   /* $.ajax({
        url: "{{ route('item.select') }}",
        type: 'GET',
        dataType: 'json',
        data: {type:option},
        success: function(data)
        {
            $.each(data, function(key, value) {
                if(key = 'models')
                //console.log(value);
                {
                    for (var i = 0; i < data.length; i++) {
                        console.log(value[0][i]);
                        $('#item_model').html('<option value="' +
                          data[0][i] +'">'+ data[0][i] +'</option>');
                    }
                }

            });
        }
    });*/
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="item_model" class="form-control" id="item_category">
   <option value="NA">NA</option>
   <option value="1">1</option>
   <option value="2">2</option>
</select>
<select name="item_model" class="form-control" id="item_model">
   <option value="NA">NA</option>
</select>
<select name="item_type" class="form-control" id="item_type">
   <option value="NA">NA</option>
</select>
<select name="item_color" class="form-control" id="item_color">
   <option value="NA">NA</option>
</select>

另一种方式

  Object.keys(data,function(obj){
     // here you ill get your keys like Models, types, colors 
     // make for loop based on your key like above 
  })

用于选择下拉列表的Ajax Success数组

1 个答案: