twitter-bootstrap 使用 'class="select-chosen"'
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38563463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using 'class="select-chosen"'
提问by Becxxxa
I'm looking to use select-chosen for my select dropdown as it has both a search feature and a flat UI which matches the UI of what I'm working on. (So trying to stay away from 'select2', 'chosen-select', etc.)
我希望将 select-chosen 用于我的选择下拉列表，因为它具有搜索功能和与我正在处理的 UI 相匹配的平面 UI。（所以尽量远离“select2”、“chosen-select”等）
When I inspect the element in Chrome to see how it works I find:
当我检查 Chrome 中的元素以查看其工作原理时，我发现：
<select id="example-chosen" name="example-chosen" class="select-chosen" style="width: 250px; display: none;">
I also find that it seems to depend on: 'bootstrap.min', 'main' and 'plugins' css/js all of which are imported into my project.
我还发现它似乎取决于：'bootstrap.min'、'main' 和 'plugins' css/js 所有这些都被导入到我的项目中。
However when I try to put this into practice I get nothing. Disabling 'display:none' returns:
但是，当我尝试将其付诸实践时，我一无所获。禁用“显示：无”返回：
I think I'm right in saying that the 'display: none' is there because bootstrap generates a new dropdown requiring me to 'hide' my hard-coded one. Surely then, the select-chosen is not being generated?
我认为我说“显示：无”是正确的，因为引导程序生成了一个新的下拉列表，要求我“隐藏”我的硬编码。那么，肯定没有生成选择选择？
To clarify, I'm trying to recreate the dropdown shown in the example link on my own page.
为了澄清起见，我正在尝试重新创建我自己页面上示例链接中显示的下拉列表。
Here is a snippet of the code I'm using:
这是我正在使用的代码片段：
<select name="user" id="user-select" class="select-chosen" style="display:none;"><option>admin</option><option>user</option></select>
Can anyone see where I'm going wrong?
谁能看到我哪里出错了？
回答by Zakaria Acharki
The example in your page use the jQuery plugin chosenand the css of bootstrap so it will be bootstrap-chosen, you have just to define your selectas usual and add chosenclass to it then init the plugin using $('.chosen').chosen();, check the example bellow.
您页面中的示例使用 jQuery 插件chosen和 bootstrap 的 css，因此bootstrap-chosen您只需select像往常一样定义您的chosen类并向其添加类，然后使用 init 插件$('.chosen').chosen();，检查下面的示例。
HTML :
HTML :
<select class="form-control chosen" data-placeholder="Choose an option please">
<option value=""></option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>
JS :
JS：
$('.chosen').chosen();
Hope this helps.
希望这可以帮助。
$('.chosen').chosen();select.form-control + .chosen-container.chosen-container-single .chosen-single {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
background-image:none;
}
select.form-control + .chosen-container.chosen-container-single .chosen-single div {
top:4px;
color:#000;
}
select.form-control + .chosen-container .chosen-drop {
background-color: #FFF;
border: 1px solid #CCC;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
background-clip: padding-box;
margin: 2px 0 0;
}
select.form-control + .chosen-container .chosen-search input[type=text] {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
background-image:none;
}
select.form-control + .chosen-container .chosen-results {
margin: 2px 0 0;
padding: 5px 0;
font-size: 14px;
list-style: none;
background-color: #fff;
margin-bottom: 5px;
}
select.form-control + .chosen-container .chosen-results li ,
select.form-control + .chosen-container .chosen-results li.active-result {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333;
white-space: nowrap;
background-image:none;
}
select.form-control + .chosen-container .chosen-results li:hover,
select.form-control + .chosen-container .chosen-results li.active-result:hover,
select.form-control + .chosen-container .chosen-results li.highlighted
{
color: #FFF;
text-decoration: none;
background-color: #428BCA;
background-image:none;
}
select.form-control + .chosen-container-multi .chosen-choices {
display: block;
width: 100%;
min-height: 34px;
padding: 6px;
font-size: 14px;
line-height: 1.428571429;
color: #555;
vertical-align: middle;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
background-image:none;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
height:auto;
padding:5px 0;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-choice {
background-image: none;
padding: 3px 24px 3px 5px;
margin: 0 6px 0 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background-color: #FFF;
border-color: #CCC;
}
select.form-control + .chosen-container-multi .chosen-choices li.search-choice .search-choice-close {
top:8px;
right:6px;
}
select.form-control + .chosen-container-multi.chosen-container-active .chosen-choices,
select.form-control + .chosen-container.chosen-container-single.chosen-container-active .chosen-single,
select.form-control + .chosen-container .chosen-search input[type=text]:focus{
border-color: #66AFE9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(102, 175, 233, 0.6);
}
select.form-control + .chosen-container-multi .chosen-results li.result-selected{
display: list-item;
color: #ccc;
cursor: default;
background-color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<select class="form-control chosen" data-placeholder="Choose an option please">
<option value=""></option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>