如题,我想用<ul><li></ul></li>标签实现select那种效果,请问要怎么实现?
就是比如这样
1
2
3
4
5
|
<
ul
>
<
li
>张三</
li
>
<
li
>李四</
li
>
<
li
>王五</
li
>
</
ul
>
|
当我选中的是张三时后台获取的是001这个值,选中李四时获取的是002这个值,选中王五时获取的是003这个值,
请问要怎么实现
用select写的话我知道,就是
1
2
3
4
5
|
<
select
>
<
option
value
=
"001"
>张三</
option
>
<
option
value
=
"002"
>李四</
option
>
<
option
value
=
"003"
>王五</
option
>
</
select
>
|
但是用<ul><li>不知道怎么写
问题已经解决了 ,谢谢各位,解决代码如下:
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
>
|
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'));
});
});
|