Javascript 如何使用jqueryajax动态下拉表中的选定数据

我附上了一张桌子的图片。数据（语言和排名）通过jQueryAjax从该表中获取。请检查数据列表的示例图像

我的问题是在下拉列表我需要显示检索数据（排名）是选择页面加载时。目前德语是正确的，意思是排名显示为3，而英语是错误的。但排名反应显示

警报（getRankingRate）结果是
2
和
3

$.get("/language/ranking/get", function(responseDB){
        var getrankingDB = '';
        var getRankingRate = 0;
        var getRankingID   = 0;
        $.each(responseDB.selectLanguageRankingTagId,function(i, item) {
          getRankingID    = item.id;
          getRankingRate  = item.ranking;
          getLanguageName = item.title_en;
          getrankingDB += '<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">'+getLanguageName+'</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm" id="getRankingLanguage_'+getRankingID+'"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></div>';
          $( ".loadlanguagemodal" ).html('<div class="modal-content"><div class="modal-header loadlanguagemodal"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Edit Languages</h4></div><div class="modal-body">'+getrankingDB+'<div class="appendRow"></div></div><div class="modal-footer"><div class="row"><select class="form-control input-sm"><option selected="selected">Add Language</option>'+optionLang+'</select></div><br><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div>').fadeIn( "slow" );
        //alert(getRankingID);
        $('#getRankingLanguage_'+getRankingID).val(getRankingRate);
        });
});

$.get（“/language/ranking/get”，函数（responseDB）{
var getrankingDB=''；
var getRankingRate=0；
var getRankingID=0；
$.each（responseDB.selectLanguageRankingTagId，函数（i，项）{
getRankingID=item.id；
getRankingRate=项目排名；
getLanguageName=item.title\u en；
getrankingDB+=''+getLanguageName+'12345'；
$（“.LoadLanguageModel”）.html（“×；编辑语言”+getrankingDB+“添加语言”+optionLang+”
关闭保存更改”）.fadeIn（“缓慢”）；
//警报（getRankingID）；
$（'#getRankingLanguage'+getRankingID）.val（getRankingRate）；
});
});

问题1
在html中有
class=“getRankingLanguageOne”
，但在jQuery中，调用
$（“.getRankingLanguage”+getRankingID）.attr（“选定的”、“选定的”）；


问题2
您的循环中的逻辑有问题。为了解释这个问题，我将简化您的函数并添加一些注释：

$.get("/language/ranking/get", function(responseDB){
        var getrankingDB = ''; // here you create a varible to hold the html for the rows
        //....
        $.each(responseDB.selectLanguageRankingTagId,function(i, item) { // here you loop over the results
          getRankingID    = item.id;
          getRankingRate  = item.ranking;
          getLanguageName = item.title_en;
          getrankingDB += '....'+getLanguageName+'...'; // here you add the html for this row to the getrankingDB variable
          $( ".loadlanguagemodal" ).html('...<div class="modal-body">'+getrankingDB+'<div class="appendRow">....').fadeIn( "slow" ); // here YOU SET THE CONTENTS OF modal-body TO THE RAW HTML VARIABLE getrankingDB ON EVERY ITERATION OF THE LOOP
          $('#getRankingLanguage_'+getRankingID).val(getRankingRate); // here you set the value of the current select box BUT, on the next iteration you YOU SET THE CONTENTS OF modal-body TO THE RAW HTML VARIABLE getrankingDB which overwites the changes you made here on the last iteration.
            // this means that only the very last itteration will actually get the value
        });
});

$.get（“/language/ranking/get”，函数（responseDB）{
var getrankingDB=''；//这里创建一个变量来保存行的html
//....
$.each（responseDB.selectLanguageRankingTagId，function（i，item）{//在这里您可以对结果进行循环
getRankingID=item.id；
getRankingRate=项目排名；
getLanguageName=item.title\u en；
getrankingDB+='..'+getLanguageName+'..'；//这里您将此行的html添加到getrankingDB变量中
$（“.LoadLanguageModel”）.html（“…”+getrankingDB+“…”）.fadeIn（“slow”）；//在循环的每次迭代中，都将模态体的内容设置为原始html变量getrankingDB
$（'#getRankingLanguage_'+getRankingID）.val（getRankingRate）；//此处设置当前选择框的值，但在下一次迭代中，您将模态体的内容设置为原始HTML变量getrankingDB，它覆盖了您在上一次迭代中所做的更改。
//这意味着，只有最后一次投票才能真正获得该值
});
});


所以，这就是问题所在，我会这样做。


//此测试的假数据
var响应B={
选择LanguageRankingTagid：[{
id:“1”，
用户id:“11”，
语言_id:“英语”，
排名：“2”，
标题：英语
}, {
id:“2”，
用户id:“11”，
语言：“德语”，
排名：“3”，
标题：德语
}, {
id:“3”，
用户id:“11”，
语言：“法语”，
排名：“4”，
标题：法语
}
]
}
var$languageModel=$（'#languageModel'）；//获取模态和对话框div
var$dialog=$languageModel.find（'.modal dialog'）；
$languageModel.modal（{show:true}）；//只显示演示的模式
var optionLang=''；//不确定这应该是什么。。。
//加载模态内容div
$dialog.html（“×；编辑语言添加语言”+optionlanguage+”
CloseSave changes”）；
//得到我们刚才添加的模态体
var$modalBody=$dialog.find（'.modalBody'）；
//循环您的数据，您将在$.get函数中使用它
$.each（responseDB.selectLanguageRankingTagId，函数（i，项）{
//吵架
变量$newRow=$（''+item.title_en+'12345'）
//设置选择值
$newRow.find（'select'）.val（item.ranking）；
//将该行添加到模态体
$modalBody.append（$newRow）；
})；
您可以大大简化这里的内容，并使用jQuery的行为通过元素的“value”属性选择元素的选项。下面是一个示例：

您的
元素应具有基于其RankingID的唯一ID，例如：

<select class="form-control input-sm" id="getRankingLanguage_'+getRankingID+'">

希望这有帮助！如果您需要更多信息，请告诉我！
如果使用
$（'#'+getRankingID）.val（getRankingRate），这会更简单，甚至更短；
我已按照您的说明更新了脚本，但问题尚未解决。更新的代码已添加到我的问题中。谢谢，我已更新了代码，但问题尚未解决resolved@samsam你能用生成的html发布一个JSFIDLE吗？如果你能添加一个
responseDB
的示例，那在最初加载默认语言时也会非常有用当我们点击该分区时，它将隐藏并加载“LoadLanguageModel”“。现在代码中的数据是动态的。我没有改成静态。如果你需要的话，我会把东西转换成静态的。响应数据是用html端硬编码的。@samsam好的，我看到问题了，我必须带我的孩子上学。等我回来后，我会给你做一个修理back@samsam不客气，这会让你得到解决并解释问题。
$('#getRankingLanguage_'+getRankingID).val(getRankingRate);