我目前在 JS 文件中有以下代码,这是读取生成的具有团队名称的链接列表。单击链接后,相关文本框将填充每个团队的正确信息。
我现在已放入下拉列表,如下所示,并且想要执行完全相同的操作,但使用文本框,因此当您从下拉列表中选择一个选项时,它会获取该选项的数据团队。
使用链接时,我会使用 a.teamLink 并监听其中一个链接被点击的情况,有人能想到我将如何对下拉列表项执行此操作吗?这是下拉列表的生成代码以及下面的相关代码。
欢迎任何帮助!
生成的下拉列表 HTML 示例:
<div id="teamDropDownDiv">
<select id="teamList" style="width: 160px;">
option id="1362174068837" class="teamDropDown">Liverpool</option>
</select>
</div>
生成的链接 HTML 示例:
<a id="1362174068837" href="#" class="teamLink">Liverpool</a>
用于监听每个链接的 JavaScript:
Team.initTeamsLink = function(){
$("a.teamLink").live("click", function(e){
e.preventDefault();
var teamId = ($(this)[0]).getAttribute('id');
$.get('/show/team/'+teamId, function(response){
if(response.retStatus === 'success'){
var teamData = response.teamData;
$('#teamId').val(teamData.key);
$('#teamName').val(teamData.name);
} else if(response.retStatus === 'failure'){
}
});
});
};
HTML 的下拉列表 JADE 模板
div#teamDropDownDiv
-if(teamsList.length > 0){
select#teamList(style='width: 160px;')
option
-each team in teamsList
option.teamDropDown(id="#{team.key}") #{team.name}
-}else{
No teams till now..
-}
HTML 的链接列表 JADE 模板
div#teamListDiv
-if(teamsList.length > 0){
-each team in teamsList
a.teamLink(id="#{team.key}", href="#") #{team.name}
br
-}else{
h3 No teams till now..
-}
Team.initTeamsDD = function(){
$("teamList").live("change", function(e){
e.preventDefault();
var teamId = $(this).val();
$.get('/show/team/'+teamId, function(response){
if(response.retStatus === 'success'){
var teamData = response.teamData;
$('#teamId').val(teamData.key);
$('#teamName').val(teamData.name);
} else if(response.retStatus === 'failure'){
}
});
});
};
显示团队职能
/**
* Get Meta data of a Team
* Send back all the details of a Team
*/
app.get('/show/team/:key', function(req, res){
util.log('Serving request for url [GET] ' + req.route.path);
Team.findByKey(req.params.key, function(err, teamData){
if(!err && teamData){
teamData = teamData;
res.json({
'retStatus' : 'success',
'teamData' : teamData
});
} else {
util.log('Error in fetching Team by key : ' + req.params.key);
res.json({
'retStatus' : 'failure',
'msg' : 'Error in fetching Team by key ' + req.params.key
});
}
});
});
最佳答案
也许这有效:
选项元素需要将团队 ID 作为值:
<div id="teamDropDownDiv">
<select id="teamList" style="width: 160px;">
<option id="1362174068837" class="teamDropDown" value="1362174068837">Liverpool</option>
</select>
</div>
所以模板应该是这样的:
div#teamDropDownDiv
-if(teamsList.length > 0){
select#teamList(style='width: 160px;')
option
-each team in teamsList
option.teamDropDown(id="#{team.key}",value="#{team.key}") #{team.name}
-}else{
No teams till now..
-}
并添加一个监听器来监听select的change事件,并从value属性中获取选中的团队ID:
$("#teamList").change(function(e){
e.preventDefault();
var teamId = $(this).val()
...
关于JavaScript/jQuery - 监听选定的下拉选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15168109/