如何显示 HTML select drop-down 列表的后半部分？

Question

如标题所述，我有一个固定宽度 80px 的 select drop-down 列表，如下所示：

<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>

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

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

例如：

我怎样才能做到这一点？

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 完整 width/height

(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: 'BC';
  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>

如何显示 HTML select drop-down 列表的后半部分？

How to display the second half of text on HTML select drop-down list?

javascript

html

css

html-select