javascript - 如何在HTML选择下拉列表中显示后半部分文字？

Question

如标题所述，我有一个固定宽度 80px 的选择下拉列表，如下所示:

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

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

但是，我希望文本的后半部分显示在列表的 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>