jQuery set value select tag

Question

У меня есть страница, и когда эта страница открыта, я хочу перейти в базу данных, получить некоторые данные и поместить эти данные в два тега select. Я создал его, и все работает хорошо, но я не могу добавить возвращаемые данные в теги select.

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, вы можете leverate его йот манипуляции. Кроме того, вы можете ускорить селектор, используя идентификатор, а не имя.

также убедитесь, что вы правильно обращаетесь к объекту данных.

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