使用 'class="select-chosen"'

Question

我希望为我的 select 下拉菜单使用 select-chosen，因为它既有搜索功能，又有与 UI 相匹配的平面 UI我在做什么。（所以尽量远离 'select2'、'chosen-select' 等）

当我检查 Chrome 中的元素以查看其工作原理时，我发现：

<select id="example-chosen" name="example-chosen" class="select-chosen" style="width: 250px; display: none;">

我还发现它似乎依赖于：'bootstrap.min'、'main'和'plugins' css/js 都导入到我的项目中。

然而，当我尝试将其付诸实践时，却一无所获。禁用 'display:none' returns:

我认为我说 'display: none' 是正确的，因为 bootstrap 生成一个新的下拉菜单，需要我 'hide' 我的硬编码下拉菜单。那么肯定不会生成 select-chosen 吧？

为了澄清，我正在尝试在我自己的页面上重新创建示例 link 中显示的下拉菜单。

这是我正在使用的代码片段：

<select name="user" id="user-select" class="select-chosen" style="display:none;"><option>admin</option><option>user</option></select>

谁能看出我错在哪里？

Answer 1

Working fiddle.

您页面中的示例使用 jQuery 插件 chosen and the css of bootstrap so it will be bootstrap-chosen，您只需照常定义 select 并添加 chosen class 然后使用 $('.chosen').chosen(); 初始化插件，检查下面的示例。

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 :

$('.chosen').chosen();

希望对您有所帮助。

$('.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>

使用 'class="select-chosen"'

Using 'class="select-chosen"'

html

javascript

css

twitter-bootstrap

jquery-chosen