CODEWITHSUNDEEP
javascriptjqueryajaxjson
William Kinaan
William Kinaan

Reputation: 28799

jQuery set value of select tag

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

Upvotes: 0

Views: 1837

Answers (3)

adeneo
adeneo

Reputation: 318202

if it's not the object, you are probably overwriting the value on each iteration:

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

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

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

Rewrite your iterate like below,

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

Upvotes: 1

Kristian
Kristian

Reputation: 21830

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.

Upvotes: 3

Related Questions