0

我在这里搜索并尝试了几种没有运气的解决方案。我有一个 html 输入菜单/列表选择，我想在用户输入输入文本框后填充选项。一旦用户输入参数，我希望 javascript 调用一个 php 页面并返回一个带有菜单选项的数组/对象。

我的html示例：

<select name="celestrials" id="celestrials" onFocus="updateCelestrials()">
<option value="Choose...">n/a</option>
</select>

我在 html 文件中的 javascript（与下面的 var myURL 中使用的 json.php 文件位于同一文件夹中）：

function updateCelestrials () {
    var orbs = document.getElementById('systemNames').value;

    var myURL = "http://www.domain.com/folder/json.php?solarSystemName="+orbs;

    $.getJSON(myURL, function(data) {
      $.each(data, function() { 
        $("<option value='" + data + "'>" + data + "</option>").appendTo("#celestrials");
      });
    });
}

我的数组由 php 返回：

echo json_encode($arrayItems, JSON_FORCE_OBJECT);

最后我的重新调整的数组/对象被修剪下来以进行总结：

{"0":"YHN-3K I","1":"YHN-3K II","2":"YHN-3K III"}

完整数组：

{"0":"YHN-3K I","1":"YHN-3K II","2":"YHN-3K III","3":"YHN-3K IV","4":"YHN-3K IV - Moon 1","5":"YHN-3K V","6":"YHN-3K VI","7":"YHN-3K VI - Moon 1","8":"YHN-3K VII","9":"YHN-3K VIII","10":"YHN-3K VIII - Moon 1","11":"YHN-3K VIII - Moon 2","12":"YHN-3K VIII - Moon 3","13":"YHN-3K VIII - Moon 4","14":"YHN-3K VIII - Moon 5","15":"YHN-3K VIII - Moon 6","16":"YHN-3K VIII - Moon 7","17":"YHN-3K VIII - Moon 8","18":"YHN-3K VIII - Moon 9","19":"YHN-3K VIII - Moon 10","20":"YHN-3K VIII - Moon 11","21":"YHN-3K VIII - Moon 12","22":"YHN-3K IX","23":"YHN-3K IX - Moon 1","24":"YHN-3K IX - Moon 2","25":"YHN-3K IX - Moon 3","26":"YHN-3K IX - Moon 4","27":"YHN-3K IX - Moon 5","28":"YHN-3K IX - Moon 6","29":"YHN-3K IX - Moon 7","30":"YHN-3K IX - Moon 8","31":"YHN-3K IX - Moon 9","32":"YHN-3K IX - Moon 10","33":"YHN-3K IX - Moon 11","34":"YHN-3K IX - Moon 12","35":"YHN-3K IX - Moon 13","36":"YHN-3K IX - Moon 14","37":"YHN-3K IX - Moon 15","38":"YHN-3K IX - Moon 16","39":"YHN-3K IX - Moon 17","40":"YHN-3K IX - Moon 18","41":"YHN-3K IX - Moon 19","42":"YHN-3K IX - Moon 20","43":"YHN-3K IX - Moon 21","44":"YHN-3K X","45":"YHN-3K X - Moon 1","46":"YHN-3K X - Moon 2","47":"YHN-3K X - Moon 3","48":"YHN-3K X - Moon 4","49":"YHN-3K X - Moon 5","50":"YHN-3K X - Moon 6","51":"YHN-3K X - Moon 7","52":"YHN-3K X - Moon 8","53":"YHN-3K X - Moon 9","54":"YHN-3K X - Moon 10","55":"YHN-3K X - Moon 11","56":"YHN-3K X - Moon 12","57":"YHN-3K X - Moon 13","58":"YHN-3K X - Moon 14","59":"YHN-3K X - Moon 15","60":"YHN-3K X - Moon 16","61":"YHN-3K X - Moon 17","62":"YHN-3K X - Moon 18","63":"YHN-3K X - Moon 19","64":"YHN-3K XI","65":"YHN-3K XI - Moon 1","66":"YHN-3K XI - Moon 2","67":"YHN-3K XI - Moon 3","68":"YHN-3K XI - Moon 4","69":"YHN-3K XI - Moon 5","70":"YHN-3K XI - Moon 6","71":"YHN-3K XI - Moon 7","72":"YHN-3K XI - Moon 8","73":"YHN-3K XII","74":"YHN-3K XII - Moon 1","75":"YHN-3K XII - Moon 2","76":"YHN-3K XII - Moon 3","77":"YHN-3K XII - Moon 4","78":"YHN-3K XII - Moon 5","79":"YHN-3K XII - Moon 6","80":"YHN-3K XII - Moon 7","81":"YHN-3K XII - Moon 8","82":"YHN-3K XII - Moon 9","83":"YHN-3K XII - Moon 10","84":"YHN-3K XII - Moon 11","85":"YHN-3K XII - Moon 12","86":"YHN-3K XII - Moon 13","87":"YHN-3K XII - Moon 14","88":"YHN-3K XII - Moon 15","89":"YHN-3K XII - Moon 16","90":"YHN-3K XII - Moon 17","91":"YHN-3K XII - Moon 18","92":"YHN-3K XII - Moon 19","93":"YHN-3K XII - Moon 20","94":"YHN-3K XIII","95":"YHN-3K XIII - Moon 1","96":"YHN-3K XIII - Moon 2","97":"YHN-3K XIII - Moon 3"}
4

3 回答 3

2

解释

插入this而不是data在创建<option>DOMElement 时。

错误在于您的$.each()循环，您倾向于在每次循环时尝试将整个data对象的值放入 DOMElement 中。

尝试只放置一个值而不是整个对象。

JQuery -现场演示

 $.each(data, function() { 
     $("<option value='" + this + "'>" + this + "</option>").appendTo("#celestrials");
 });

纯 JavaScript 循环 -现场演示

注意：我没有使用该.length属性，因为接收到的对象可能不一定有一个。这取决于它是否采用有效格式。照原样，它似乎不是 JSON 对象。

for(var i=0; i<Object.keys(data).length; i++) {
    document.querySelector('#celestrials').innerHTML += "<option value='" + data[i] + "'>" + data[i] + "</option>"
}

选择

于 2013-08-20T15:23:54.363 回答
0

看到这个小提琴：http: //jsfiddle.net/gCFM9/

我建议这个选项：

for(var i in data) {
   data[i] //each value of i position
}
于 2013-08-20T15:20:45.180 回答
0 
function updateCelestrials () {
    // If you are using jQuery - use jQuery.
    var orbs = $('#systemNames').val();

    var myURL = "http://www.domain.com/folder/json.php?solarSystemName=" 
                    // make sure you escape user's input
                    + encodeURIComponent(orbs); 

    $.getJSON(myURL, function(data) {
      // make less DOM actions by storing in local variable 
      // and appending later on
      var items = '';
      $.each(data, function(index, value) { 
        items += "<option value='" + index + "'>" + value + "</option>";
      });
      $("#celestrials").html(items); // beware. this will replace all options :)

      // also avoid using jQuery for no reason when creating 
      // elements with $([html here]).appendTo
    });
}

但我宁愿将 $.each 替换为

for (var index in data) {
   if (data.hasOwnProperty(index)) { // make sure you are using your properties
       items += "<option value='" + index + "'>" + data[index] + "</option>";
   }
}
于 2013-08-20T15:33:54.900 回答