0

ページがあり、このページが開いたら、データベースに移動してデータを取得し、このデータを 2 つの選択タグに入れます。私はそれを作成し、すべてうまくいきましたが、返されたデータを選択タグに追加できません。

HTML コード

  <li>
        <label>Related Concepts</label>
        <p>
            <label>Source</label>
            <select name="source[]">
                <option>select source</option>
            </select>
        </p>
        <p>
            <label>Destination</label>
            <select name="destination[]">
                <option>select destination</option>
            </select>
        </p>
    </li>

jQuery コード

$('#addRelation').ready(function (){
    $.getJSON("http://localhost/Mar7ba/Ontology/getAllConcepts/TRUE",function(data){
        var source = document.getElementsByName('source');
        var des = document.getElementsByName('destination');
        
        for(var i=0;i<data.length;i++){
            source.innerHTML+="<option>"+data[i]+"</option>";
            des.innerHTML+="<option>"+data[i]+"</option>";
        }
    });
});
4

3 に答える 3

3

私があなたなら、次の変更を加えます。

html

  <li>
        <label>Related Concepts</label>
        <p>
            <label>Source</label>
            <select name="source[]" id="source">
                <option>select source</option>
            </select>
        </p>
        <p>
            <label>Destination</label>
            <select name="destination[]"  id="destination">
                <option>select destination</option>
            </select>
        </p>
    </li>

JavaScript

$('#addRelation').ready(function (){
    $.getJSON("http://localhost/Mar7ba/Ontology/getAllConcepts/TRUE",function(data){
        var source = $('select#source');
        var des = $('select#destination');
        var options = '';

        for(var i=0;i<data.length;i++){
            options += "<option>"+data[i]+"</option>";
        }

        source.html( options );
        des.html( options );
    });
});

すでにjqueryを使用しているため、dom操作に活用できます。また、名前ではなく ID を使用することで、セレクターを高速化できます。

また、データ オブジェクトに適切にアクセスしていることを確認してください。

于 2012-05-14T18:23:16.543 に答える
1

オブジェクトでない場合は、反復ごとに値を上書きしている可能性があります。

var elems = $('[name="source"], [name="destination"]');

elems.empty();
$.each(data, function(index, item) {
    elems.prepend("<option>"+item+"</option>");
});
于 2012-05-14T18:22:57.997 に答える
1

以下のように反復を書き換えます。

$('#addRelation').ready(function (){
    $.getJSON("http://localhost/Mar7ba/Ontology/getAllConcepts/TRUE",function(data){
        var $source = $('select[name=source]');
        var $des = $('select[name=destination]');

        var options = [];
        for(var i=0;i<data.length;i++){
            options.push("<option>"+data[i]+"</option>");
        }

        var optionStr = options.join('');
        $source.html(optionStr);
        $des.html(optionStr);
    });
});
于 2012-05-14T18:23:21.067 に答える