将<select>转换为,但保留功能

时间:2016-06-03 23:22:06

标签: javascript jquery

我想转换&#34;选择&#34;进入&#34; ul&#34;列表能够很好地设计它。它在我的插件中的工作方式是,当你选择其中一个&#34; select&#34;您可以选择在其下方加载另一个部分。所以,我已经设法转换&#34;选择&#34;进入&#34; ul&#34;使用jQuery,但当我点击&#34; li&#34;列表它不会按照原始内容加载我的内容&#34;选择&#34;落下。 有办法吗?我想这与价值观有关? 以下是我的代码: $(&#34; .jr-form-categories&#34;)。追加(&#39;&lt; ul id =&#34; property-list&#34;&gt;&lt; / ul&gt;&#39;) ; $(&#34; .jr-cat-select选项&#34;)。each(function(){     $(&#34;#property-list&#34;)。追加(&#39;&lt; li&gt;&lt; a href =&#34;&#39; + $(this).attr(&#39;价值&#39;)+&#39;&#34;&gt;&#39; + $(this).html()+&#39;&lt; / a&gt;&lt; / li&gt;&#39;); }); $(&#34;#property-list&#34;)。on(&#34; click&#34;,&#34; li a&#34;,function(e){     e.preventDefault();     $(&#34; .jr-CAT-选择&#34)。VAL($(本).attr(&#34; HREF&#34)); }); 这是HTML: &lt; select name =&#34; data [listing] [catid] []&#34; class =&#34; jr-cat-select jrSelect&#34;大小=&#34; 1&#34;&GT;     &lt; option value =&#34; 0&#34;&gt; - 选择类别 - &lt; /选项&gt;     &lt; option value =&#34; 4&#34;&gt;平坦的LT; /选项&GT;     &lt; option value =&#34; 5&#34;&gt;房子&LT; /选项&GT;     &lt; option value =&#34; 7&#34;&gt;共享单位&lt; /选项&gt;     &lt; option value =&#34; 6&#34;&gt;共享住宅&lt; /选项&gt;     &lt; option value =&#34; 8&#34;&gt;工作室&LT; /选项&GT; &LT; /选择&GT; 这就是转换后的列表的样子,当你点击链接时它不起作用: &lt; ul id =&#34; property-list&#34;&gt;     &lt; li&gt;&lt; a href =&#34; 0&#34;&gt; - 选择类别 - &lt; / a&gt;&lt; / li&gt;     &lt; li&gt;&lt; a href =&#34; 4&#34;&gt;平坦的LT; / A&GT;&LT; /锂&GT;     &lt; li&gt;&lt; a href =&#34; 5&#34;&gt;房子&LT; / A&GT;&LT; /锂&GT;     &lt; li&gt;&lt; a href =&#34; 7&#34;&gt;共享单位&lt; / a&gt;&lt; / li&gt;     &lt; li&gt;&lt; a href =&#34; 6&#34;&gt;共享住宅&lt; / a&gt;&lt; / li&gt;     &lt; li&gt;&lt; a href =&#34; 8&#34;&gt;工作室&LT; / A&GT;&LT; /锂&GT; &LT; / UL&GT;

1 个答案:

答案 0 :(得分:0)

我相信你正在寻找像Select2这样的东西。这可以将您的fun <- function ( i ) { ss <- seq ( length ( L [[ i ]] )) Map ( function ( a , b ) which ( L [[ a ]] [[ b ]] > 1 ) , ss[[ i ]] , MoreArgs = ( a = list ( seq ( length ( L )) ))) } lapply ( seq ( length ( L )) , fun ) 转换为<select><ul>,不仅如此,还可以为您提供自动提示和其他内容等选项。

如果您想将其转换回来,请使用<li>。非常简单。

.select2("destroy")
$(function () {
  $("select").select2();
});

将演示文稿转换回<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> <select name="data[Listing][catid][]" class="jr-cat-select jrSelect" size="1"> <option value="0">- Select Category -</option> <option value="4"> Flat</option> <option value="5"> House</option> <option value="7"> Shared Flat</option> <option value="6"> Shared House</option> <option value="8"> Studio</option> </select>

的演示

<select>
$(function () {
  $("select").select2();
  $("#remBtn").click(function () {
    $("select").select2("destroy");
  });
});