使用 ul 和 li 标签选择框

Question

我想在每个 <img> <option> ，因为选项标签不接受其中的标签，我想使用 ul li 选择框 --- 右侧每个选项内都有取消图标。

到目前为止，这是我的 jsfiddle

     $('.select ul li.option').click(function() {
    		 $(this).siblings().children().remove();
       var a= $(this).siblings().toggle();
    console.log( $(a).is(":visible"));
      	 $(this).siblings().append('<img src="https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">');
       // $(this).addClass('darr');

    })

 .select ul li.option {
    background-color: #DEDEDE;
    box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
}

.select ul li.option:hover {
    background-color: #B8B8B8;
}

.select ul li.option {
    z-index:1;
    padding:5px;
    display:none;
}

.select ul li:first-child {
    display:block;
}

.select ul li {
    cursor:default;
}

.rarr:after, .darr:after {
    content: ' ▼ ';
    float:left;
    padding:0 5px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
  <ul style="width:150px;">
    <li values="1" class="option">Dropdown one</li>
    <li values="2" class="option">Dropdown two</li>
    <li values="3" class="option">Dropdown three</li>
    <ul>
</div>

还是有问题

1. 打开时子弹出现在左边。

2）取消图像不会在关闭时消失。

谢谢

原文由 Pranesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

可以使用 list-style:none css 规则消除子弹。

除此之外，您必须稍微调整代码以使其按您的期望使用。

   $('.select ul li.option').click(function() {
    //use addBack to add the clicked element to the collection.
    $(this).siblings().addBack().children().remove();
    var a = $(this).siblings().toggle();
    $(this).siblings().append('<img src="https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">');
    //prepend the clicked element to the parent UL
    $(this).parent().prepend(this);
  })

演示

原文由 Rajaprabhu Aravindasamy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

添加这个你的 CSS 来隐藏项目符号

.select ul {
    list-style: none;
}

还有关闭时图片不消失的问题，如果你用正确的方式关闭标签就没事了。你没有在你的代码中关闭 ul

 <ul style="width:150px;">
 <li values="1" class="option">Dropdown one</li>
 <li values="2" class="option">Dropdown two</li>
 <li values="3" class="option">Dropdown three</li>
</ul>

尝试这个 ：

 $('.select ul li.option').click(function() {
  $(this).siblings().children().remove();
  var a= $(this).siblings().toggle();
  console.log( $(a).is(":visible"));
  $(this).siblings().append('<img src="https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Delete.png" style="float:right; width:12px; height:12px;">');
  // $(this).addClass('darr');

})

 .select ul{
  list-style:none;
}
.select ul li.option {
    background-color: #DEDEDE;
    box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -webkit-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
    -moz-box-shadow: 0px 1px 0 #DEDEDE, 0px -1px 0 #DEDEDE;
}

.select ul li.option:hover {
    background-color: #B8B8B8;
}

.select ul li.option {
    z-index:1;
    padding:5px;
    display:none;
}

.select ul li:first-child {
    display:block;
}

.select ul li {
    cursor:default;
}

.rarr:after, .darr:after {
    content: ' ▼ ';
    float:left;
    padding:0 5px;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="select">
  <ul style="width:150px;">
    <li values="1" class="option">Dropdown one</li>
    <li values="2" class="option">Dropdown two</li>
    <li values="3" class="option">Dropdown three</li>
    </ul>
</div>

原文由 Ahmed Salama 发布，翻译遵循 CC BY-SA 4.0 许可协议