JavaScript如何在java-foreach循环中输出下拉列表

Question

有一个页面，使用foreach从数据库读取了20篇文章。
这些文章都属于不同的类别，比如摇滚或是电子等。我使用Ajax获得了所有文章的类别，想单个改变某篇文章的类别。比如当前文章的类别是摇滚，后面紧挨着就是当前数据库的所有类别的下拉列表。之后是一个更改的功能。但是问题出现了，只有第一篇文章使用ajax可以读取到所有文章的类别，之后循环输出的下拉列表都是空白。请问是如何？
看懂了在回答，谢谢大家！

Answer 1

ajax请求后传到前台 读取到所有文章的类别吗？如果没有查看一下后台输出

Answer 2

<select name="city">
<c:forEach items="${cityList}" var="data">//${formatList}是后台下来菜单的list集合，循环前保证有值
       <option value="${data.cityId}">${data.cityName}</option>
</c:forEach>
</select>City entity Bean
private int cityId;
private String cityName;
setter/getter;后台java code;
List<City> cityList = getList();//list中存放的city对象
request.setAttribute("cityList",cityList);
用forward方式跳转不要用重定向

Answer 3

回各位，foreach读取数据是单独的文章，包括标题与类别。
只是在读取的HTML页面中加入了一段javascript脚本，用意在每篇文章标题后使用ajax将文章所有类别读取。问题不是出现在foreach能不能读取数据，而是在循环读取数据后，只有第篇文章后面的下拉列表可以使用ajax读取出所有文章类别，其余的文章标题后的下拉列表确实空白！文章可以正确读取，ajax也可以正确读取。请后面的朋友们，看明白在回答，谢谢！

Answer 4

"只有第篇文章后面的下拉列表可以使用ajax读取出所有文章类别，其余的文章标题后的下拉列表确实空白！"
循环输出的代码贴出来,js代码贴出来……

Answer 5

Java代码：
<c:forEach var="music" items="${requestScope.pager.musicLimitList}">
         <p id="us" style="color:green">
         <select id="sort" name="sort">
       <option value="-请选择-">-请选择-</option>
       </select>&nbsp;&nbsp; 
       <button style="height:25px;">更改</button>
      
         所属类别：<c:out value="${cba.CBA_Sort}"/>&nbsp;&nbsp;
         </p> 
         <h1><a href='/music/${music.music_Link }/${music.music_Id }' target="_blank">[<c:out value="${music.music_Type}"></c:out>] <c:out value="${music.music_Title}"/></a></h1>
        </c:forEach>
JavaScript代码：var sort;
        $(function(){
var soption=$("#content #respond #ak #sort").val();
sort=document.getElementById("sort");
for(var i=sort.options.length;i>=0;i--){
sort.options.remove(i)
}
$.get("/music/servlet",null,function(data){
createOption(data);
})
});
function createOption (data) {
var obs=data.split(",");
for(var i=0;i<obs.length;i++){
var newoption=document.createElement("OPTION");
sort.options.add(newoption);
newoption.innerText=obs[i];
newoption.value=obs[i];
}
}

Answer 6

<c:forEach var="music" items="${requestScope.pager.musicLimitList}" >
            <p id="us" style="color:green">
            <select id="sort${music.music_Id }" name="sort">//这里的id重复啊，你循环了啊；建议用name；要不id后面再加上${music.music_Id }
                      <option value="-请选择-">-请选择-</option>
                  </select>&nbsp;&nbsp; 
                  <button style="height:25px;">更改</button>
                  
            所属类别：<c:out value="${cba.CBA_Sort}"/>&nbsp;&nbsp;
            </p> 
            <h1><a href='/music/${music.music_Link }/${music.music_Id }' target="_blank">[<c:out value="${music.music_Type}"></c:out>] <c:out value="${music.music_Title}"/></a></h1>    
        </c:forEach>

Answer 7

 <select id="sort" name="sort">
修改为
 <select class="sortselect" name="sort">
js修改为$(function(){
$.get("/music/servlet",null,function(data){
var obs=data.split(",");
$('.sortselect').each(function(i,o){
var $o=$(o);
$o[0].options.length=0;
$.each(obs,function(m,n){
$("<option></option>").val(n).text(n).appendTo($o);
});
})
})
});当然，你要确认你用了jQuery,因为我猜你用了jQuery,然后用jQuery的写法写的js.你的代码不行的原因在于
 <select id="sort" name="sort">
你的页面中有n个 id="sort",一个页面中id相同的值只能出现一次。如果重复了，就会出问题，（一般的情况是，只对第一个id有效，其他无效)。