如何在 HTML 选择下拉列表中显示文本的后半部分？

Question

正如标题所述，我有一个固定宽度为 80 像素的选择下拉列表，如下所示：

<select id="dd_country_code_2" name="dd_country_code_2" style="width: 120px;  height: 23px;">
    <option value="SEL">(Country code)</option>
    <option value="AF">Afghanistan ‏(‎+93)</option>
    <option value="AL">Albania ‏(‎+355)</option>
    <option value="DO">Dominican Republic ‏(‎+1)</option>
    <option value="FK">Falkland Islands ‏(‎+500)</option>
</select>

当用户选择一个选项时，结果如下：

但是，不是这样，我希望文本的后半部分显示在列表的 80 像素中，以便用户能够清楚地看到其国家代码。

例如：

我怎样才能做到这一点？

Answer 1

您可以使用direction: rtl; css 属性。

(function() {
  document.querySelector('select').addEventListener('change', function(e) {
    e.target.style.direction = 'ltr';
    if(e.target.selectedIndex > 0) {
      e.target.style.direction = 'rtl';
    };
  });
})();

#dd_country_code_2 {
  width: 120px;
}

<select id="dd_country_code_2" name="dd_country_code_2" style="height: 23px;">
    <option value="SEL">(Country code) </option>
    <option value="AF">Afghanistan (+93) </option>
    <option value="AL">Albania (+355) </option>
    <option value="DO">Dominican Republic (+1) </option>
    <option value="FK">Falkland Islands (+500)</option>
</select>

Answer 2

由于宽度是个问题，这里有另一种方法，当列表项太大时，它会被截断。

已更新，使用伪键按住向下箭头，以便将input 设为全宽/全高

(function() {
  document.querySelector('select').addEventListener('change', function(e) {
    var val = e.target.options[ e.target.selectedIndex ].text.split('(');
    if (val[0].length > 12) {
      val[0] = val[0].slice(0, 10) + '...';
    }    
    e.target.nextElementSibling.value = val.join('(');
  });
})();

.selectable {
  position:relative;
  background-color:white;
  border:solid grey 1px;
  width:120px;
  height:18px;
  overflow: hidden;
  font-size: 12px;
}
.selectable:after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  width:14px;
  height:18px;
  line-height:20px;
  pointer-events: none;
  font-size: 10px;
  text-align: center
}
.selectable select {
  position:absolute;
  top:0px;
  left:0px;
  font-size: inherit;
  border:none;
  width:120px;
  margin:0;
}
.selectable input {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  padding:1px;
  font-size: inherit;
  border:none;
  pointer-events: none;
}
.selectable select:focus, .selectable input:focus {
  outline:none;
}

<div class="selectable">
  <select>
    <option value="SEL">(Country code)</option>
    <option value="AF">Afghanistan (+93)</option>
    <option value="AL">Albania (+355)</option>
    <option value="DO">Dominican Republic (+1)</option>
    <option value="FK">Falkland Islands (+500)</option>
  </select>
  <input type="text" name="countrycode" value="(Country code)" />
</div>