控制<选择>使用JQuery

Control open/close of <select> with JQuery

本文关键字：使用 JQuery gt 选择 控制 lt      更新时间：2023-09-26

我正在创建一个自定义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>

您可以使用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设置样式。

    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打开或所选选项不是第一个时，颜色将为深灰色；如果选择的选项是第一个，则颜色将为浅灰色。

相关文章：