我有一个页面，当打开此页面时，我想要转到数据库，检索一些数据并将这些数据放在两个选择标记中。我创建了它，一切正常，但我无法将返回的数据追加到选择标签。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代码

回答

相关问题