For example, I want to use the <ul> <li> </ul> </LI> label to implement the select effect. How can I implement it?
For example
XML/html code?
12345 |
< ul > < li > JOHN </ li > < li > Li Si </ li > < li > Wang Wu </ li > </ ul > |
When I select Michael Jacob, the value 001 is obtained in the background, the value 002 is obtained in the case of Li Si, and the value 003 is obtained in the case of Wang Wu,
How can this problem be achieved?
If you use the SELECT statement
XML/html code?
12345 |
< select > < option value = "001" > JOHN </ option > < option value = "002" > Li Si </ option > < option value = "003" > Wang Wu </ option > </ select > |
However, I do not know how to write it with <ul> <li>
The problem has been solved. Thank you. The solution code is as follows:
XML/html code?
12345678910 |
< 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" > JOHN </ li > < li data-value = "111111" > Li Si </ li > < li data-value = "12345678910" > Haha </ li > < li data-value = "Hello" > Wow, haha </ li > </ ul > </ div > |
JavaScript code?
12345678910 |
$(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‘)); }); }); |
<Ul> <li> </LI> </ul> label