使用'class =“select-chosen”'

Question

我希望在我的选择下拉列表中使用select-selected，因为它既有搜索功能，又有与我正在处理的UI相匹配的平面UI。 （所以试图远离'select2'，'selected-select'等等。）

Link to example page

当我检查Chrome中的元素以查看其工作原理时，我会找到：

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

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

然而，当我尝试将其付诸实践时，我什么都没得到。禁用'display：none'会返回：

我认为我说'display：none'是正确的，因为bootstrap会生成一个新的下拉列表，要求我“隐藏”我的硬编码。当然，选择的选择不会被生成？

为了澄清，我正在尝试重新创建我自己页面上示例链接中显示的下拉列表。

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

<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 和引导程序的CSS，因此它将 bootstrap-chosen ，您只需要像往常一样定义parameters: xbundle.doctrine.factory: Doctrine\ORM\Repository\DefaultRepositoryFactory services: .... 并向其添加select类，然后使用chosen初始化插件，请查看下面的示例。

HTML：

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

JS：

<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>

希望这有帮助。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;