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

説明

DOMElementsを作成するときthisの代わりに挿入します。data<option>

エラーはループにあり、ループするたびにオブジェクト全体の値を DOMElement$.each()に入れようとする傾向があります。data

オブジェクト全体ではなく、値を1 つだけ入れるようにしてください。

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 に答える