从ul li jquery获取所选项目答案

【问题标题】：Getting selected item from ul li jquery从ul li jquery获取所选项目
【发布时间】：2015-02-15 20:54:01
【问题描述】：

您好，我正在动态填充 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>

onclick 方法如下：

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>

Onclick 函数为：

function doSelection(){
    alert($('#option1 li.selected').attr('data-input'));

}

现在我得到一个值作为警报，但我总是将第一个元素作为警报。无论我点击哪个元素，仍然总是得到列表的第一个元素。请帮忙。

【问题讨论】：

你能不能在你的ul里面提供完整的html
<li> 元素没有value 属性。
任何时候你添加类selected和value到想要的li？
你没有类名为 selected 的 li。
@FrédéricHamidi <li> 实际上有 value 属性，如果它的父级是 <ol> w3.org/TR/html-markup/li.html#li.attrs.value 题外话

标签： javascript jquery html

【解决方案1】：

正如您在@Frédéric Hamidi 的评论中看到的那样，li 与ul 一起使用时，value 属性不存在，因此最好将您自己的属性添加到它，然后像这样访问它：

	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>

【讨论】：

我试过你的代码。但是这次点击事件不起作用。我不知道问题。是因为我在动态生成列表吗？？
我也在动态生成。运行代码 sn -p。
按照我的做法就可以了。尝试记录您的数据，看看它是否正确。
似乎 .on() jquery 函数在我的中不起作用。你是只使用ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js 还是更多？？
让我们continue this discussion in chat.

【解决方案2】：

您需要将selected 类添加到任何li 元素。看看吧：

msg = "<li class="selected"> <a href=#>"+data[i]+"</a></li>";

并获取锚标签的内容：

function doSelection(){
    var id = $('ul#option1 > li.selected a').text();
    alert(id);

}

【讨论】：

你有 li 的 selected 类吗？
我更新了答案，改变了选择器。我努力为我工作

【解决方案3】：

这将对您有所帮助。您可以使用 jquery 方法来处理选择事件。

 $("#option1 li").click(function() {
     alert($(this).html());
 });

【讨论】：