使用UL而不是html SELECT [英] Using UL instead of html SELECT

问题描述

我正在尝试构建一个类似于Gumtree的类别和位置下拉菜单的下拉菜单：



www.gumtree.co.za



以下函数似乎执行了一般的想法，使用数据值将值传递到每个利（ http://jsfiddle.net/Starx/a6NJk / 2 / [ ^ ]）：



HTML：

 <   a     href   = ＃  A     id   = < span class =code-keyword> submit > 获取值<   / a  >  
 <   ul  < span class =code-keyword>>  
 <   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'）; 
 $（ < span class =code-string> 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（< span class =code-string>' 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.za

The 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！