从 ul li jquery 获取所选项目
Getting selected item from ul li jquery
嗨,我正在动态地在 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 部分为:
<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>
点击方法如下:
function doSelection(){
var id = $('#option1 li.selected').attr('value');
alert(id);
}
问题是我得到的id值"未定义"。
更新
正如你们所建议的,我将代码更改为:
将 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 作为:
<div class="cate-map">
<ul id="option1" onclick="doSelection()">
</ul>
</div>
点击功能为:
function doSelection(){
alert($('#option1 li.selected').attr('data-input'));
}
现在我得到一个值作为警报,但我总是得到第一个元素作为警报。无论我单击哪个元素,仍然总是获得列表的第一个元素。请帮忙。
您需要
将类添加到任何li
元素selected
。看看吧:
msg = "<li class="selected"> <a href=#>"+data[i]+"</a></li>";
并获取锚标签的内容:
function doSelection(){
var id = $('ul#option1 > li.selected a').text();
alert(id);
}
正如
您在 Hamidi 的评论中看到@Frédéric value
属性在与ul
一起使用时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>
这将对您有所帮助。您可以使用 jquery 方法来处理选择事件。
$("#option1 li").click(function() {
alert($(this).html());
});
相关文章:
- 在BootStrap菜单栏中为所选项目设置背景,类似于BootStrap中的父导航选项
- jQuery:根据select选项中的每页项目进行分页
- 更新:仅根据单选按钮和所选选项选择特定项目
- HTML选择,在DOM中选择了正确的选项,但在firefox中显示了错误的项目
- 如何在angular js中的select选项中获取所选项目id
- 如何将一个表单中的项目添加到 Rails 中另一个表单的下拉选项
- 当表单控件选项具有多个参数时,如何在组合框中填充所选项目
- 通过单击按钮将选项卡(项目)添加到选项卡面板,扩展
- 如何将此选项添加到此图像选取器项目中
- 更新“项目”选项以进行排序
- 在呈现项目后,挖空选择绑定回调的选项
- 在单击选项卡式项目时隐藏和创建另一个对象 - HTML CSS
- 使用表排序器筛选所选选项列表中的选定项目
- jQuery 在选项列表中重新填充所选项目
- 将项目插入活动选项卡窗格
- Microsoft Dynamics Online:将所有选项集项目复制到多行文本字段(使用 JavaScript)
- 在选择选项中选择多个项目,而不使用“Ctrl”键
- jQuery Mobile,在选项列表中选择所有项目
- 从下拉列表中选择项目后,显示新选项并显示文本
- 如何在浏览器窗口/选项卡关闭时删除本地存储项目