javascript - Bootstrap 多选 onfocus 不起作用

Question

当我专注于 Bootstrap 多选时，我试图更改图标颜色。但 onfocus 不适用于多选。 HTML 代码如下:

<div class="col-sm-7" id="hearDiv">
 <div class="form-group">
  <div class="input-group">
   <span class="input-group-addon"><i class="fa fa-users" id="heari"></i>
   </span>
   <select class="form-control" name="hear[]" 
    id="hear" onfocusin="icon(this.id)" onfocusout="iconout(this.id)" 
    multiple>
    <option value="Google Search">Google Search</option>
    <option value="Social Media (Facebook, Instagram etc.)">Social Media 
     (Facebook, Instagram etc.)</option>
    <option value="From a Friend">From a Friend</option>
   </select>
  </div>
 </div>
</div>

这是 JavaScript:

function icon(id){
    document.getElementById(id+"i").style.color = ("#ff3333");
}
function iconout(id){
    document.getElementById(id+"i").style.color = ("#595959");
}

Answer 1

试试这个方法:

function icon(id) {
  id.style.color = ("#ff3333");
}

function iconout(id) {
  id.style.color = ("#595959");
}

<div class="col-sm-7" id="hearDiv">
  <div class="form-group">
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-users" id="heari"></i></span>
      <select class="form-control" name="hear[]" id="hear" onfocus="icon(this)" onfocusout="iconout(this)" multiple>
    <option value="Google Search">Google Search</option>
    <option value="Social Media (Facebook, Instagram etc.)">Social Media 
     (Facebook, Instagram etc.)</option>
    <option value="From a Friend">From a Friend</option>
   </select>
    </div>
  </div>
</div>