标签: html-select

我有一个带有 CSS 箭头（和线）的选择下拉列表。如果您单击箭头以外的任何位置，下拉菜单会打开，但如果您直接单击箭头，则不会打开。我希望箭头也可以点击。

这是我的代码：

.select {
  position: relative;
  z-index: 1;
  background-color: #fff;
  border-radius: 6px;
}

.select:before,
.select:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  z-index: 1;
}

.select:before {
  right: 37px;
  content: '';
  display: block;
  width: 1px;
  height: 22px;
  margin-top: -11px;
  background-color: #636667;
}

.select:after {
  right: 15px;
  width: 0;
  height: 0;
  margin-top: -3px;
  border: transparent 6px solid;
  border-top: #636667 6px solid;
}

<div class="select">
  <select class="form-control" id="state-dropdown">
	<option>Select State</option>
  </select>
</div>

我正在为我的项目使用一个主题。由于主题的 javascript，我面临与使用 jQuery 在选择中附加选项相关的问题。
当我附加一个选项来选择时，尽管已添加，但它不会显示。我发现这是因为页面加载后在 select 上方添加了一个按钮和 div。我粘贴2个（不同的代码）供参考：

实际代码
我在 laravel Blade 模板中所做的代码

<div class="form-group">
    <select class="selectpicker search-fields" id="ct" name="ct" data-live-search="true" data-live-search-placeholder="Search value">
        <option value="">Contract Types</option>
        @foreach (\App\ContractType::all() as $ct)
        <option value="{{ $ct->id }}">{{ $ct->type }}</option>
        @endforeach
    </select>
</div>

在浏览器中检查的代码
当我检查浏览器中选择的元素时的代码

<div class="form-group">
    <div class="btn-group bootstrap-select search-fields open">
        <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" data-id="ct" title="Contract Types" aria-expanded="true">
            <span class="filter-option pull-left">Contract Types</span>&nbsp;
                <span class="bs-caret">
                    <span class="caret"></span>
                </span>
        </button>
        <div class="dropdown-menu open" role="combobox" style="max-height: 590px; overflow: hidden; min-height: 158px;"> …

  render(){

    let { classes } = this.props;

    let list = classes.map((item, index) => {
      return (
        <option >{item}</option>
      )
    })


    return(
      <div className="filter-bar">

        <form className="sort-form">
          <div className="classSelect">
            <span>select class</span>
              <select name="classSelect" onChange={this.handleClassChange}}>
                <option selected="selected"  >Please choose class</option>
                {list}
              </select>
          </div>
        </form>
      </div>
    )
  }
};

我想映射一个数组并使用每个元素作为选择下拉列表中的选项，并且还有一个额外的空白选项，该选项默认为单击下拉列表。

目前，我拥有的额外内容可在列表中使用，但默认值始终是数组中的第一个元素，而我希望默认值是“请选择您的班级”

有人可以解释一下吗？

我有一些HTML选择:

<select class="form-control, dropdown" id="delperffrom" name="delperffrom">
. . .
<select class="form-control, dropdown" id="delperfto" name="delperfto">
. . .

我想将它们初始化为"无价值",所以有这个javascript,它有效:

document.getElementById("delperffrom").selectedIndex = -1;

..和这个jQuery,它没有:

$("#delperfto").selectedIndex = -1;

为什么jQuery不起作用？