<ul><li>标签实现<select>标签效果

使用<ul><li></li></ul>标签实现<select>标签的那种效果，即页面选择的是Text，但后台实际获取的是value，代码如下：

<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>

		$(document).ready(function() {
			'use strict';
			var $driver = $('.driver'), $list = $driver.children('ul');
			$list.delegate('li', 'click', function() {
				var $this = $(this);		
				document.getElementById("driverId").value = $this.attr('data-value');
				alert(document.getElementById("driverId").value);
			});
		});