javascript - 使用 JQuery 控制 <select> 的打开/关闭

Question

我正在创建自定义 HTML5 <select>菜单。根据设计，我试图更改 select 的颜色元素取决于所选元素。基本上我需要 #555555当菜单打开且选择的元素不是第一个元素时的颜色，#c7cacb 用于选择第一个元素的关闭菜单。

当用户打开菜单，选择第一个选项，然后再次打开菜单时，问题就出现了:所有元素都是#c7cacb。如果我用 jQuery(我没有找到方法)或其他方式(堆栈在这里)获得菜单打开|关闭状态，那么控制颜色会很容易。我怎样才能做到这一点？

这是我的代码:

$(document).ready(function(){
  // wrap all selectors to add ::after in css
  $('select:not([disabled])').wrap('<label class="dropdown">');
  $('select[disabled]').wrap('<label class="dropdownDisabled">');
  // controlling color of elements
  $('select').click(function(){
    var thisDropdown= $(this);
    if($(thisDropdown).prop('selectedIndex') == 0){
      thisDropdown.css('color', '#555555');
      thisDropdown.click( function(){ 
        if($(thisDropdown).prop('selectedIndex') == 0) {
          thisDropdown.css('color', '#c7cacb');
        }
      });
    }
  });
})

/*dropdown styling*/
select {
  width: 230px;
  height: 46px;
  background: #f1f5f8;
  color:#c7cacb;
  font-size: 16pt;
  padding: 3px;
  border: 2px solid #d7d6d5;
  border-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select::-ms-expand {/*removing dropdown arrow for IE*/
  display: none;
}
.dropdownlabel {display: block; font-size: 16pt; margin-bottom: 10px; color: #d7d6d5}
label.dropdown::after {/*adding custom arrow*/
    content: "\e90e";
    font-family: 'icomoon';
    font-size: 8pt;
    color: #555555;
	display:inline-block;
	box-sizing:border-box;
    margin-left: -32px;
    pointer-events :none; /* let the click pass trough */
}

select[disabled] {
	color: #c7cacb;
	border: 2px solid #e4e5e6;
}

label.dropdownDisabled::after {
    content: "\e90e";
    font-family: 'icomoon';
    font-size: 8pt;
    color: #d3d5d7;
	display:inline-block;
	box-sizing:border-box;
    margin-left: -32px;
    pointer-events :none; /* let the click pass trough */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selected" class="dropdownlabel">Dropdown label</label>
<select name="selected">
  <option value="s">None Selected</option>
  <option value="s2">Selected</option>
  <option value="s3">Another value</option>
</select>

Answer 1

您可以使用 CSS 和一些 JavaScript/jQuery 来实现您想要的效果。这个想法很简单:

• 将 HTML5 data- 属性(例如 data-value)添加到将具有当前值的 select(通过默认，第一个)。

  <select name="selected" data-value="s">
    <option value="s">None Selected</option>
    <option value="s2">Selected</option>
    <option value="s3">Another value</option>
  </select>
  

• 使用颜色 #555555 设置选择和选项的样式。

  select, option { color:#555555; }
  

• 如果select的data-value为“s”(第一个选项的值)，则将其设置为浅灰色:

  select[data-value='s'] { color:#c7cacb; }
  

• 每次选择更改值时，都会更新data-value 的值

  $("select").on("change", function() { 
    $(this).attr("data-value", $(this).val());
  }
  

这样做，你就会得到想要的效果。这是使用您的代码的示例:

$(document).ready(function(){
  // wrap all selectors to add ::after in css
  $('select:not([disabled])').wrap('<label class="dropdown">');
  $('select[disabled]').wrap('<label class="dropdownDisabled">');

  // controlling color of elements
  $("select").on("change", function() {
    $(this).attr("data-value", $(this).val());
  });

})

select {
  width: 230px;
  height: 46px;
  background: #f1f5f8;
  color:#c7cacb;
  font-size: 16pt;
  padding: 3px;
  border: 2px solid #d7d6d5;
  border-radius: 8px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select::-ms-expand {
  display: none;
}

.dropdownlabel {
  display: block; 
  font-size: 16pt; 
  margin-bottom: 10px;
  color: #d7d6d5;
}

label.dropdown::after {
  content: "\e90e";
  font-family: 'icomoon';
  font-size: 8pt;
  color: #555555;
  display:inline-block;
  box-sizing:border-box;
  margin-left: -32px;
  pointer-events:none; /* let the click pass trough */
}

select, option {
  color:#555555;
}

select[data-value='s'] {
  color:#c7cacb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="selected" class="dropdownlabel">Dropdown label</label>
<select name="selected" data-value="s">
  <option value="s">None Selected</option>
  <option value="s2">Selected</option>
  <option value="s3">Another value</option>
</select>

现在，当select打开或所选选项不是第一个选项时，颜色将为深灰色；如果选择的是第一个选项，颜色将为浅灰色。