<select>标签不举下拉

-2

里面工作，我希望把引导下拉菜单里选择标签。当我尝试选择任何选项时，选择标签会关闭。任何想法为什么会发生。我想这acieve<select>标签不举下拉

<div class="dropdown"> 
    <button class="btn btn-info editbtn" data-toggle="dropdown"> 
     <i class="fa fa-pencil" aria-hidden="true"></i></button> 
    <ul class="dropdown-menu"> 
     <li><label>Label</label><input class="form-control InputRequired" type="text"></li> 
     <li><label>Placeholder</label><input class="form-control InputRequired" type="text"></li> 
     <li><label>Type</label> 
      <select class="form-control"> 
       <option value="volvo">Volvo</option> 
       <option value="volvo">Volvo</option> 
       <option value="volvo">Volvo</option> 
       </select> 
      </li><br> 
     <button class="btn btn-info save">Save</button> 
     </ul> 
    </div> 
</div>

来源

2016-12-06 Abid

再加上工作小提琴，切实了解您的问题 – ScanQR

错误的做法完全。您没有考虑到用户体验。通过这样的层次结构已经确定，最好显示二次集合。请参阅：http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3 –

@BradEvans我附上了一张图片我如何通过不使用select内部下拉菜单来实现这一点？ – Abid

虽然你不应该使用一个下拉菜单，这样，如果你绝对要做到这一点，你可以手动触发下拉拨动自己。

下拉清除的原因是因为click.bs.dropdown.data-api事件document正在触发，因为您单击了select元素。

这可以通过在下拉菜单中没有使用[data-toggle="dropdown"]选择触发避免。

缺点是您无法通过单击下拉菜单外的关闭下拉菜单。当然，您可以随时添加其他活动来关闭它，但这取决于您。

(function($, window, document) { 
 
    $("#dropdown").on("click", function() { 
 
    $(this).parent().toggleClass("open"); 
 
    }); 
 

 
    $("#dropdown-save").on("click", function() { 
 
    $(this).closest(".dropdown").removeClass("open"); 
 
    }); 
 
})(jQuery, window, document);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> 
 
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> 
 

 
<div class="dropdown"> 
 
    <button id="dropdown" class="btn btn-primary dropdown-toggle" type="button">Dropdown Example 
 
    <span class="caret"></span> 
 
    </button> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">HTML</a></li> 
 
    <li><a href="#">CSS</a></li> 
 
    <li> 
 
     <label for="label">Label</label> 
 
     <input type="text" id="label"> 
 
    </li> 
 
    <li> 
 
     <select> 
 
     <option value="volvo">Volvo</option> 
 
     <option value="saab">Saab</option> 
 
     <option value="mercedes">Mercedes</option> 
 
     <option value="audi">Audi</option> 
 
     </select> 
 
    </li> 
 
    <li> 
 
     <button id="dropdown-save">Save</button> 
 
    </li> 
 
    </ul> 
 
</div>

来源

2016-12-06 07:16:23 josephting

<select>标签不举下拉

回答

相关问题