从ul li jquery获取所选项目
[英]Getting selected item from ul li jquery
问题描述
Hi I am poulating a list in ul - li HTML tag dynamically. 
嗨，我正在动态地在ul-li HTML标签中列出一个列表。 All I need is to get value of selected li of corresponding ul. 我只需要获得相应ul的选定li的值。 I tried all possible jquery methods I got but still i am getting undefined.I am populating ul - li as: 我尝试了所有可能的jquery方法，但我仍然没有定义。我正在填充ul - li：
jQuery.get(url, function(data) {
for(i=0;i<data.length;i++){
//console.log(data[i]) //"+data[i]+"
msg = "<li> <a href=#>"+data[i]+"</a></li>";
document.querySelector('#option1').innerHTML += msg;
}
});
HTML section is as: HTML部分如下：
<body>
<div class="wrap">
<div class="content">
<div class="cate-map">
<ul id="option1" onclick="doSelection()">
</ul>
</div>
</div>
<div class="content2">
<div class="cate-map">
<ul id="option2">
</ul>
</div>
</div>
<div class="clear"></div>
<div class="content3"> <textarea id="content4"></textarea>
</div>
</div>
</body>
onclick method is as : onclick方法如下：
function doSelection(){
var id = $('#option1 li.selected').attr('value');
alert(id);
}
Problem is that I am getting 'undefined' for id value. 问题是我的id值'未定义'。
UPDATE UPDATE
As you all suggested I changed my code as: 正如你们所有人建议我改变我的代码：
Populating ul as: 填充ul为：
jQuery.get(url, function(data) {
for(i=0;i<data.length;i++){
msg = "<li data-input="+data[i]+" class='selected'> <a href=#>"+data[i]+"</a></li>";
document.querySelector('#option1').innerHTML += msg;
}
});
HTML ul as: HTML ul为：
<div class="cate-map">
<ul id="option1" onclick="doSelection()">
</ul>
</div>
Onclick function as: Onclick功能如下：
function doSelection(){
alert($('#option1 li.selected').attr('data-input'));
}
Now I am getting a value as alert but I am getting the first element as alert always. 现在我得到一个警告值，但我总是将第一个元素作为警报。 Whichever element I click still always getting the first element of list. 无论我点击哪个元素仍然总是得到列表的第一个元素。 Please do help. 请帮忙。
3 个解决方案
解决方案1
2 2014-12-17 11:11:39
As you see in the comment from @Frédéric Hamidi value attribute is not there for li when it is used with ul so better add your own attribute to it then access it like this: 正如你在@FrédéricHamidi的评论中所看到的那样，当与ul使用时， value属性不适用于li ，所以最好将它自己的属性添加到它，然后像这样访问它：
for(i=0;i<4;i++){// use actual data it is just a demo msg = "<li data-input="+i+" class='selected'> <a href=#>"+i+"</a></li>"; document.querySelector('#option1').innerHTML += msg; } $('#option1 li').click(function(){ //console.log($(this).attr('data-input')); alert($(this).attr('data-input')); // this will alert data-input value. });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="content"> <div class="cate-map"> <ul id="option1"> </ul> </div> </div> <div class="content2"> <div class="cate-map"> <ul id="option2"> </ul> </div> </div> <div class="clear"></div> <div class="content3"> <textarea id="content4"></textarea>
解决方案2
1 2014-12-17 10:39:41
You need add selected class to any li element. 您需要将selected类添加到任何li元素。 Check it out: 看看这个：
msg = "<li class="selected"> <a href=#>"+data[i]+"</a></li>";
And get the content of anchor tag: 并获取锚标记的内容：
function doSelection(){
var id = $('ul#option1 > li.selected a').text();
alert(id);
}
解决方案3
1 2014-12-17 10:41:33
This will help you. 这会对你有所帮助。 You can use jquery method for handling selection event. 您可以使用jquery方法处理选择事件。
$("#option1 li").click(function() {
alert($(this).html());
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.