0

我有一个页面，当这个页面打开时，我想去数据库，检索一些数据并将这些数据放在两个选择标签中。我创建了它，一切正常，但我无法将返回的数据附加到选择标签。

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 回答