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

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