我有一個頁面，當打開此頁面時，我想要轉到數據庫，檢索一些數據並將這些數據放在兩個選擇標記中。我創建了它，一切正常，但我無法將返回的數據追加到選擇標籤。jQuery選擇標記的設置值

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

來源

2012-05-14 William Kinaan

如果我是你，我會做出以下更改：

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它DOM操作。此外，您可以使用ID而不是名稱加快選擇器的速度。

另外，請確保您正確訪問數據對象。

來源

2012-05-14 18:23:16 Kristian

我可以'不使用ID爲選擇標籤，因爲我會在我的頁面有很多選擇標籤，它們是自動創建的，所以我讓名稱作爲源[]，所以我可以得到它的值後提交 –

我會嘗試你的代碼，謝謝 –

唯一讓我誤解你的選擇標記的是我不確定當你的名字值有尾括號時官方行爲（和選擇要求）是什麼：source [] – Kristian

，如果它不是對象，你可能覆蓋在每次迭代值：

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

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

來源

2012-05-14 18:22:57 adeneo

我警報數據[0]，它的工作原理 –

我警報數據[0]，它打印C1，然後報警數據[1]，它打印C2 –

重寫你的迭代像下面，

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

來源

2012-05-14 18:23:21

我試過你的代碼，仍然一樣， –

@WilliamKinaan嘗試做'console.log（data [i]） '或'alert（data [i]）;'讓我們知道你看到了什麼。 –

我得到了C1，C2，這意味着它的工作原理，但爲什麼不選擇使用？ –

jQuery選擇標記的設置值

HTML代碼

jQuery代碼

回答

相關問題