Javascript 从 ul li jquery 获取所选项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27523379/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting selected item from ul li jquery
提问by Vishnu Raj
Hi I am poulating a list in ul - li HTML tag dynamically. All I need is to get value of selected li of corresponding ul. I tried all possible jquery methods I got but still i am getting undefined.I am populating ul - li as:
嗨，我正在 ul - li HTML 标签中动态填充一个列表。我所需要的只是获取相应 ul 的选定 li 的值。我尝试了所有可能的 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
更新
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.
现在我得到了一个警报值，但我总是得到第一个元素作为警报。无论我单击哪个元素，仍然总是获得列表的第一个元素。请帮忙。
回答by Juan de Parras
You need add selectedclass to any lielement.
Check it out:
您需要selected为任何li元素添加类。一探究竟：
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);
}
回答by Suchit kumar
As you see in the comment from @Frédéric Hamidi valueattribute is not there for liwhen it is used with ulso better add your own attribute to it then access it like this:
正如您在@Frédéric Hamidi 的评论中看到的那样，value属性在使用li时不存在，ul因此最好将您自己的属性添加到它然后像这样访问它：
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>回答by sandesh jadhav
This will help you. You can use jquery method for handling selection event.
这会帮助你。您可以使用 jquery 方法来处理选择事件。
$("#option1 li").click(function() {
alert($(this).html());
});
