javascript - 从 ul li jquery 中获取选定的项目

标签 javascript jquery html

您好,我正在动态填充 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 格式为:

<div class="cate-map">
    <ul id="option1"  onclick="doSelection()">

    </ul>

    </div>

Onclick 函数为:

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

}

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

最佳答案

正如您在@Frédéric Hamidi 的评论中看到的,value 属性在 liul 一起使用时不存在,因此最好添加你自己的属性然后像这样访问它:

	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>

关于javascript - 从 ul li jquery 中获取选定的项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27523379/

相关文章:

javascript - 我怎样才能使元素垂直对齐与 jQuery

jquery - 放大 body 背景效果

java - 如何提取 <p> 标签之间的文本

javascript - typescript 错误 : Type 'string' is not assignable to type for Typography

javascript - 如何将 servlet 中的字符串解析为 javascript 并创建包含数组值的格式化对象

javascript - 添加 javascript 'for' 循环

javascript - $(#form).submit() 在 Chrome 浏览器中不起作用

javascript - 在 HTTPS 网页上注入(inject) iframe

javascript - 当我点击一个 div 时停止一个函数

javascript - 专注于只读输入