jQuery设置select标签的值

Question

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

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>";
        }
    });
});

Answer 1

如果我是你，我会做出以下改变：

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而不是名称来加速选择器。

另外，请确保您正确访问数据对象。

Answer 2

如果它不是对象，则可能会覆盖每次迭代的值：

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

elems.empty();
$.each(data, function(index, item) {
    elems.prepend("<option>"+item+"</option>");
});

Answer 3

重写你的迭代，如下所示，

$('#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);
    });
});