jquery - 如何创建下拉按钮，在左侧选项列表上有一个复选图标并在文本框中传递值

Question

请给我建议用于创建下拉按钮的框架，如下所示:

Answer 1

试试这个，

您可以根据需要更改CSS。

HTML CODE:

<div class="dropdown btn-group">
  <button class="btn btn btn-mini btn-inverse dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">

     <span class="glyphicon glyphicon-chevron-down"></span>
  </button>
    <ul class="dropdown-menu" id="demolist">
      <li class="dropdown-header">Search in:</li>
      <li><a href="#"><div class="user-check"></div>HTML</a></li>
      <li><a href="#"><div class="user-check"></div>CSS</a></li>
      <li><a href="#"><div class="user-check"></div>JavaScript</a></li>
    </ul>
     <input type="text" class="form-control" id="usr">

JQUERY CODE:

$('#demolist li a').on('click', function(){
    $('.user-click').removeClass('user-click');
    $(this).find('.user-check').addClass('user-click');
    $('#usr').val($(this).text());
});

<小时/>

CSS :

.user-check{
        background-color: #FFFFFF;
    border: 2px solid #D3DAD9;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    height: 16px;
    margin: 0px 6px 0px 0px;
    outline: 0 none;
    padding: 0;
    position: relative;
    top: 1px;
    transition: background-color 200ms ease 0s,border-color 200ms ease 0s;
    width: 16px;
    z-index: 1;
    float: left;
}

.user-click:before {
  bottom: 10px;
    content: "\2713";
    display: block;
    position: relative;
    right: 0px;
    transform: rotate(15deg);
    transition: all 1s ease-out 0s;
    width: 14px;
    font-size: 20px;
    color: #c1c1c1;
}