Question

I have a page and when this page is opened I want to go to the database, retrieve some data and put this data in two select tags.
I created it and everything works good but I can’t append the returned data to the select tags.

HTML code

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

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

If i were you, I’d make the following changes:

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

Since you’re already using jquery, you can leverate it for dom manipulation. Also, you can speed up your selector by using an ID rather than name.

also, make sure you’re accessing the data object properly.