Heim  >  Artikel  >  Web-Frontend  >  <ul><li></li></ul>标签问题_html/css_WEB-ITnose

<ul><li></li></ul>标签问题_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:02:571124Durchsuche

如题,我想用

标签实现select那种效果,请问要怎么实现?

就是比如这样
<ul>    <li>张三</li>    <li>李四</li>    <li>王五</li></ul>

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


用select写的话我知道,就是
<select><option value="001">张三</option><option value="002">李四</option><option value="003">王五</option></select>

但是用
  • 不知道怎么写


    回复讨论(解决方案)

    <ul>    <li name="001">张三</li>    <li name="002">李四</li>    <li name="003">王五</li></ul>


    $(function(){
       $("ul li").click(function(){
           var ar = $(this).attr("name");
           alert(ar);
       })
    })

    你自己包含一个jquery就可以了

    纯手打,有点错误,下面没打,你可以测试一下

    如果是表单提交的话,你完全可以在表单中设置一个隐藏域,点击li时,改变隐藏域的值即可,最终提交表单即可

    你点击ul的时候 改变  select 的 value

    恩  好的    谢谢您

    如果是表单提交的话,你完全可以在表单中设置一个隐藏域,点击li时,改变隐藏域的值即可,最终提交表单即可


    恩,我现在是这样写的,但是还有一个获取到的值得问题,比如说:
    点张三我应该获取的是001,但实际获取的是1,自动去掉了00
    点李四我获取的是222,正常
    点王五我获取的是0
    点赵六获取的也是0
    这个有什么办法解决吗?

    function getDriverId(obj) {	document.getElementById("driverId").value = obj.value;	alert(document.getElementById("driverId").value);}


    <input type="hidden" id="driverId" name="driverId" value="" /><ul>	<li value="001" onclick='getDriverId(this)'>张三</li>	<li value="222" onclick='getDriverId(this)'>李四</li>	<li value="12345678910" onclick='getDriverId(this)'>王五</li>	<li value="测试" onclick='getDriverId(this)'>赵六</li> </ul>

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

    <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);		$driver.value = $this.attr('data-value');		 //alert($driver.value);		 //alert($this.attr('data-value'));  	});});

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn