使用UL而不是html SELECT

本文介绍了使用UL而不是html SELECT的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在尝试构建一个类似于Gumtree的类别和位置下拉菜单的下拉菜单： www.gumtree.co.za 以下函数似乎执行了一般的想法，使用数据值将值传递到每个利（ http://jsfiddle.net/Starx/a6NJk / 2 / [ ^ ]）： HTML： < a href = ＃ A id = submit > 获取值< / a > < ul > < li class = init > [SELECT] < / li > < li data-value = 值1 > 选项1 < / li > < li 数据值 = 值2 > 选项2 < / li > < li data-value = 值3 > 选项3 < / li > < / ul > JS ： $（ ul）。on（ click， 。init， function （） { $（ this ）。nearest（ ul）。children（' li：not（.init）'）。切换（）; }）; var allOptions = $（ ul）。children（' li：not（.init）'） ; $（ ul）。on（ 点击， li： not（.init）， function （）{ allOptions.removeClass（' selected'）; $（ this ）。addClass（' selected'）; $（ ul）。children（' 。init'）。html（$（ this ）。html（））; allOptions.toggle（）; }）; $（ ＃submit）。click（ function （）{ alert（ The选择值为 + $（ ul）。find（ 。selected）。data（ value））; }）; 我将如何使用但名称属性代替： < 选择 名称 = 示例 > 我们将非常感谢任何帮助！解决方案 （ ul）。on（ 点击， 。init， function （）{ （ this ）。nearest（ ul）。children（' li：not（.init）'）。toggle（）; }）; var allOptions = （ ul）。children（' li：not （的.init）'）; I am trying to build a dropdown select menu similar to the category and location dropdowns of Gumtree:www.gumtree.co.zaThe following function seems to perform the general idea, using data-value to pass values to each li (http://jsfiddle.net/Starx/a6NJk/2/[^]):HTML:<a href="#"A id="submit"> Get Value</a><ul> <li class="init">[SELECT]</li> <li data-value="value 1">Option 1</li> <li data-value="value 2">Option 2</li> <li data-value="value 3">Option 3</li></ul>JS:$("ul").on("click", ".init", function() { $(this).closest("ul").children('li:not(.init)').toggle();});var allOptions = $("ul").children('li:not(.init)');$("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle();});$("#submit").click(function() { alert("The selected Value is "+ $("ul").find(".selected").data("value"));});How would I use the name attribute though, to substitute for:<select name="example">Any help will be greatly appreciated! 解决方案 ("ul").on("click", ".init", function() {(this).closest("ul").children('li:not(.init)').toggle();});var allOptions =("ul").children('li:not(.init)'); 这篇关于使用UL而不是html SELECT的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！