jquery - 使 DIV 和 UL 像 SELECT 元素一样

Question

我想做的是替换 <span class="hideSelect"> 的“我的下拉列表”文本带有被点击文本的元素 <li> , 为了让它像 <select> 一样工作元素。

CSS:

.myDrop {
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 5px 10px;
  max- width: 100%;
  min-width: 100%;
  vertical-align: middle;
}

.mydrop ul {
  display: none;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 3px;
  max-height: 250px;
  overflow: auto;
}

.mydrop ul li {
  padding: 5px 10px;
}

.mydrop ul li:hover {
  background: #ddd;
}

JavaScript:

$(".mydrop").click(function(e) {
    e.stopPropagation();
    $(".mydrop>ul").stop().slideToggle(500);
    $(document).click(function(){
      $(".mydrop>ul").hide();
    });
  });
  $(".mydrop>ul li").click(function () {
    $(".hideSelect").hide();
  });

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <div class="mydrop">
        <div class="myDrop">
          <span class="hideSelect">
              <span id="caption">my dropdown</span>
              <span class="pull-right"><i class="fa fa-caret-down"></i>
    </span>
          </span>
        </div>
        <ul id="options">
          <li class="visilkl">Hot Dog, Fries and a Soda</li>
          <li>Burger, Shake and a Smile</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
          <li>Sugar, Spice and all things nice</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

如果我没理解错你想隐藏 <span class="hideSelect"> 的内容所以 my dropdown 一旦从<ul>中选择了一个值，将被隐藏.

你可以这样实现:

$(".mydrop").click(function(e) {
    e.stopPropagation();
    $(".mydrop>ul").stop().slideToggle(500);
    $(document).click(function() {
      $(".mydrop>ul").hide();
    });
});
$(".mydrop>ul li").click(function() {
    $(".hideSelect").text(this.innerHTML); //Get the text from the clicked li and write it to the span with class hideSelect
})

HTML 没有改变

有关演示，请参阅此 JSFiddle

希望这对您有所帮助!