j查询选择标签的设置值

jQuery set value of select tag

本文关键字：设置 标签 查询 选择      更新时间：2023-09-26

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

网页代码

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

j查询代码

$('#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>";
        }
    });
});
如果我

是你，我会进行以下更改：

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

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

像下面这样重写你的迭代，

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

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

var elems = $('[name="source"], [name="destination"]');
elems.empty();
$.each(data, function(index, item) {
    elems.prepend("<option>"+item+"</option>");
});
相关文章：