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

Question

我想要将“选择”转换为"ul“列表，以便能够很好地将其样式化。它的工作方式在我的插件，是当你选择一个“选择”选项，你会得到另一个部分加载在它下面。因此，我已经设法使用jQuery将"select“转换为"ul”，但是当我单击"li“列表中的一个选项时，它并没有按照原来的"select”下拉列表加载我的内容。

有办法吗？我想这跟价值观有关吧？

下面是我的代码：

$(".jr-form-categories").append('<ul id="property-list"></ul>');
$(".jr-cat-select option").each(function(){
    $("#property-list").append('<li><a href="' + $(this).attr('value') + '">' +     $(this).html() + '</a></li>');
});
$("#property-list").on("click", "li a", function(e){
    e.preventDefault();
    $(".jr-cat-select").val($(this).attr("href"));
});

下面是HTML：

<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>

这就是转换后的列表的样子，当您单击链接时，它就不工作了：

<ul id="property-list">
    <li><a href="0">- Select Category -</a></li>
    <li><a href="4"> Flat</a></li>
    <li><a href="5"> House</a></li>
    <li><a href="7"> Shared Flat</a></li>
    <li><a href="6"> Shared House</a></li>
    <li><a href="8"> Studio</a></li>
</ul>

Answer 1

我相信你是在找类似Select2的东西。这可以将您的<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");
  });
});

<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>
<button id="remBtn">Remove</button>

​