<ul><li></li></ul>标签问题

如题,我想用<ul><li></ul></li>标签实现select那种效果,请问要怎么实现?

就是比如这样

XML/HTML code?


1

2

3

4

5

<ul>

    <li>张三</li>

    <li>李四</li>

    <li>王五</li>

</ul>

当我选中的是张三时后台获取的是001这个值,选中李四时获取的是002这个值,选中王五时获取的是003这个值,
请问要怎么实现

用select写的话我知道,就是

XML/HTML code?


1

2

3

4

5

<select>

<option value="001">张三</option>

<option value="002">李四</option>

<option value="003">王五</option>

</select>

但是用<ul><li>不知道怎么写

问题已经解决了 ,谢谢各位,解决代码如下:

XML/HTML code?


1

2

3

4

5

6

7

8

9

10

<div class="ddl collapse driver cover-3">

    <input type="hidden" id="driverId" name="driverId" value="" />

    <input type="text" placeholder="" readonly>

    <ul>

        <li data-value="001">张三</li>

        <li data-value="111111">李四</li>

        <li data-value="12345678910">哈哈</li>

        <li data-value="你好">哇哈哈</li>

    </ul>

</div>

JavaScript code?


1

2

3

4

5

6

7

8

9

10

$(document).ready(function() {

    ‘use strict‘;

    var $driver = $(‘.driver‘), $list = $driver.children(‘ul‘);

        $list.delegate(‘li‘‘click‘function() {

        var $this = $(this);

        $driver.value = $this.attr(‘data-value‘);

         //alert($driver.value);

         //alert($this.attr(‘data-value‘));  

    });

});

时间: 2024-08-26 03:09:54

<ul><li></li></ul>标签问题的相关文章

&lt;ul&gt;-&lt;li&gt;无序列表标签

概念:多个并列的列表项之间没有先后顺序 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http

Jquery和JS获取ul中li标签

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

用正则表达式抓取网页中的ul 和 li标签中最终的值!

获取你要抓取的页面 const string URL = "http://www.hn3ddf.gov.cn/price/GetList.html?pageno=1";            string htmlStr = null;            for (int i = 0; i < 10; i++)            {                try                {                    System.Net.Http

用ul、li标签 创建css横向导航菜单?(转)

创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观.但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔,让这些文字分离开来,不至于混在一起. 现在我们正常的做法是应用ul.li标签把链接作为无序列表(unordered list)来标识.再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来.对导航条使用无序列表似乎是

HTML的ul和li标签的使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>我的第一个网页</title> </head> <body> <h2>我的电脑文件列表</h2> <ul><li>我的电脑</li> <ul> <li>本地磁盘(C:)</li&g

如何在Html的CSS中去除&lt;li&gt;标签前面小黑点,和ul、LI部分属性方法

div是很多人做网站都会用到的,但在显示效果时前面总是会有一个小黑点,这个效果很多人不想要,但又不知到如何去除,然而我们可以用以下方法来清除. 1.在CSS中写入代码.找到相关性的CSS,在..li和.ul下写入list-sytle:none;当然有的会这样来写list-style-type:none, 这种写法特别是在一些CMS中最常见. 2.在相关的页面找到head部分写入下面的代码<style type="text/css">list-style:none;</

ul和li标签实现列表

css样式 #m{ width: 80%; overflow: hidden; padding: 0px; margin: 50px 0 0 20px;}#m,#m ul{ list-style-type: none; padding: 0px;}#m li a{ display: block; color:#FFFFFF; text-decoration: none; }#m li ul li a{ text-decoration: none;}#m li ul{ display:none;

&lt;UL&gt;中&lt;li&gt;标签前编号图片的简单调用

<style type="text/css"> ul li{ list-style-type:none} .men ul{ background:url(http://top.baidu.com/img/icon-num.gif) no-repeat 0px 5px} .men ul li{ padding-left:20px; line-height:25px;} </style> <body> <div class="men&qu

用ul、li做横向导航

/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */div.menu ul{ list-style:none; /* 去掉ul前面的符号 */ margin: 0px; /* 与外界元素的距离为0 */ padding: 0px; /* 与内部元素的距离为0 */ width: auto; /* 宽度根据元素内容调整 */}/* 所有class为menu的div中的ul中的li样式 */div.menu ul li{ float:left; /* 向左漂移,