带有ajax和json的Javascript DropDown菜单 [英] Javascript DropDown menu with ajax and json

问题描述

这是我的HTML代码

---

 <！ -  Javascript DropDown菜单 - > 
< label>选择le groupe< / label> 
< select id =groupeonchange =yyyyy;> 
< option value =>选择le groupe< / option> 
< / select> 
 
< script type =text / javascriptsrc =https://www.google.com/jsapi>< / script> 
  

我想使用下拉列表我的代码。在我的代码javascript我有一个函数

 函数getTable（）{
 $ .ajax（{
 dataType：'json'，
类型：'GET'，
 url：'call / json / mytables'，
 xhrFields：{
 withCredentials：true 
}， 
成功：函数（响应）{
 console.log（响应）; 
 sendQuery（响应[0]）; 
}，
}）; 
} 
  

像这样，而且函数（响应）给了我需要的Json dropDown in onchange =yyyyy，
但是我不知道我怎么能用它???????????????????????????????????????????????? / div>

您需要从服务器请求下拉列表的数据（您的代码已在执行此操作），然后根据服务器返回的格式解析响应。如果我们假设它是JSON格式，那么您可以在响应回调中使用 JSON.parse（响应），否则您将不得不编写一些自定义解析代码。 如果是这种情况，请发表评论，并附上有关您的回复格式的相关信息。

要填写下拉列表，您可以使用 $。每个 迭代数据数组并追加< option> 元素到< select> 元素。

这是正在使用的jsFiddle ，以下是更新的代码

  //禁用选择控件，直到获得数据
 $（＃groupe）。prop（'disabled'，true ）; 
 
函数populateSelectWithOptions（$ select，data）
 {
 //删除任何现有内容
 $ select.html（''）; 
 
 //迭代数据并为每个项添加一个select选项
 $ .each（data，function（key，val）{
 $ select.append（'< lt ; option value ='+ val.tableId +'>'+ val.tableName +'< / option>'）; 
}）; 
 
 //启用选择控件
 $ select.prop（'disabled'，false）; 
} 
 
函数getTable（）{
 $ .ajax（{
 dataType：'json'，
类型：'GET'，
 url：'call / json / mytables'，
 xhrFields：{
 withCredentials：true 
}，
 success：function（response，status）{
 console。 log（响应，状态）; 
 if（status ==success）
 {
 //我们期望JSON格式的响应
 response = JSON.parse（response ）; 
 
 //如果响应不是json格式，那么你将需要
 //在这里写一些自定义解析代码
 
 populateSelectWithOptions（$（ #groupe），回复）; 
} 
}，
}）; 
} 
 
 //请求数据
 getTable（）; 
  

this is my code in HTML

---

<!-- Javascript DropDown menu -->
<label>Select le groupe</label>
<select id="groupe" onchange="yyyyy";>
<option value="">Select le groupe</option>
</select>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

i want to use dropdown in my code. in my code javascript i have a function

function getTable() {
      $.ajax({
              dataType: 'json',         
              type: 'GET',
              url: 'call/json/mytables',
              xhrFields: {
                         withCredentials: true
                },
              success: function(response) {
                  console.log(response); 
                  sendQuery(response[0]);
              },
          });
    } 

like this and also function(response) give me Json that i need for my DropDown in onchange="yyyyy", but i don't know how i can use it ????????

解决方案

You need to request the data for your dropdown from the server (your code is already doing that) and then parse the response based on what format your server is returning. If we assume it's in JSON format then you can use JSON.parse(response) in your response callback, otherwise you will have to write some custom parsing code. If that's the case please leave a comment with the relevant info about your response format.

To fill the dropdown you can use $.each to iterate over your data array and append <option> elements to your <select> element.

Here is a working jsFiddle to play with and below is the updated code

// disable the select control until you get the data
$("#groupe").prop('disabled', true);    

function populateSelectWithOptions($select, data)
{
    // remove any exisiting contents
    $select.html('');

    //iterate over the data and append a select option for each item
    $.each(data, function(key, val) {
        $select.append('<option value="' + val.tableId + '">' + val.tableName + '</option>');
    });

    // enable the select control
    $select.prop('disabled', false);
}

function getTable() {
    $.ajax({
        dataType: 'json',
        type: 'GET',
        url: 'call/json/mytables',
        xhrFields: {
            withCredentials: true
        },
        success: function(response, status) {
            console.log(response, status);
            if (status == "success")
            {
                // we expect a response in a JSON format
                response = JSON.parse(response);

                // if the response is not in the json format then you will have to
                // write some custom parsing code here

                populateSelectWithOptions($("#groupe"), response);
            }
        },
    });
}

// request the data
getTable();

这篇关于带有ajax和json的Javascript DropDown菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！