Question

亲爱的人我正在做一个纸牌游戏列表，在某些情况下我希望第二个名字是粗体。

有办法吗？我尝试使用<b></b>标签，但这不起作用。

<select>
<option value="90"> Manni </option>
<option value="91"> Manni - Haraldarmanni </option>
<option value="93"> Manni - Hornafjarðarmanni </option>
<option value="94"> Manni - Laugarvatnsmanni </option>
<option value="92"> Manni - Trjámann </option>
</select>

Answer 1

你问的是不可能的！因为select元素是由OS而不是HTML呈现的。 无法通过CSS设置样式。所以你必须考虑替代方案。我想从<ul> list和<li>选项创建一个下拉列表。所以我创建了这个下面的文章：{{ 3}} 。现在是你可以随心所欲地选择任何你喜欢的选项！

使用UL和LI作为HTML选择元素删除

(function($, undefined) {
  var open = [];

  var opts = {
    selector: '.dropdown',
    toggle: 'dropdown-toggle',
    open: 'dropdown-open',
    nest: true
  };

  $(document).on('click.dropdown touchstart.dropdown', function(e) {
    // Close the last open dropdown if click is from outside the target dropdown
    if (open.length && (!opts.nest || !open[open.length - 1].find(e.target).length)) {
      open.pop().removeClass(opts.open);
    }

    var $this = $(e.target);

    // If target is a dropdown then toggle it...
    if ($this.hasClass(opts.toggle)) {
      e.preventDefault();

      $this = $this.closest(opts.selector);

      if (!$this.hasClass(opts.open)) {
        open.push($this.addClass(opts.open));
      } else {
        open.pop().removeClass(opts.open);
      }
    }
  });

})(jQuery);

.dropdown {
  float: left;
  position: relative;
  width: 200px;
  padding: 5px;
  margin-right: 10px;
  background: #ccc;
}
.dropdown a {
  display: block;
  text-decoration: none;
  color: #333;
}
ul.dropdown-menu li:nth-child(2) {
  font-weight: bold;
}
/* toggle */

.dropdown .dropdown-toggle {
  padding: 0;
}
/* dropdown */

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ccc;
}
/* options */

.dropdown-menu .option a {
  padding: 5px;
}
.dropdown-menu .option a:hover {
  background-color: #aaa;
}
/* open */

.dropdown-open {
  z-index: 400;
}
.dropdown-open > .dropdown-menu {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divSelect" class="dropdown">
  <a href="#options" class="dropdown-toggle">Manni </a>
  <ul class="dropdown-menu">
    <li class="option"><a href="#">Manni - Haraldarmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Hornafjarðarmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Laugarvatnsmanni</a>
    </li>
    <li class="option"><a href="#">Manni - Trjámann</a>
    </li>
  </ul>
</div>

Answer 2

如果我们要编写纯JS中的问题：FIDDLE

<div id="fakeSelect">
    <div id="selectBox"></div>
    <ul id="selectOptionsBox">
        <li>Manni</li>
        <li>Manni - Haraldarmanni</li>
        <li>Manni - <b>Hornafjarðarmanni</b></li>
        <li>Manni - Laugarvatnsmanni</li>
        <li>Marglita hálfmáninn</li>
        <li>Marglita klukkan</li>
        <li>Marías</li>
        <li>Mausel</li>
        <li>Málverkasafnið</li>
        <li>Mexíkanskur veltipóker</li>
        <li>Miklar hindranir</li>
        <li>Monte Carlo</li>
    </ul>
</div>

#fakeSelect {
    user-select: none;
    -webkit-user-select: none;
}
#selectBox {
    width: calc(200px - 4px);
    border: 1px solid silver;
    padding: 2px;
    cursor: default;
    font: 13px Arial, sans-serif;
    position: relative;
}
#selectBox:hover {
    border: 1px solid gray;
}
#selectBox::after {
    position: absolute;
    content: "▼";
    font-size: .8em;
    right: 5px;
    top: 5px;
}
#selectOptionsBox {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 200px;
    border: 1px solid silver;
    border-top: none;
    overflow: auto;
    height: 150px;
    cursor: default;
    font: 13px Arial, sans-serif;
    display: none;
}
#selectOptionsBox li {
    padding: 2px;
}
#selectOptionsBox li:hover {
    background: gainsboro;
}

var selectBox = document.getElementById("selectBox");
var selectOptionsBox = document.getElementById("selectOptionsBox");
var selectOptions = selectOptionsBox.getElementsByTagName("li");

selectBox.innerHTML = selectOptions[0].innerHTML;

selectBox.onclick = function() {
    if (selectOptionsBox.style.display != "block") {
        selectOptionsBox.style.display = "block";
    } else {
        selectOptionsBox.style.display = "none";
    }
}
window.onclick = function(e) {
    if (e.target != selectBox &&
        selectOptionsBox.style.display == "block") {
        selectOptionsBox.style.display = "none";
    }
}

for (var i = 0; i < selectOptions.length; i++) {
    (function(i) {
        selectOptions[i].onclick = function() {
            selectBox.innerHTML = this.innerHTML;
        }
    })(i);
}

<select> list </select>中的粗体文本

2 个答案: