Как отобразить вторую половину текста в раскрывающемся списке выбора 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

Поскольку ширина проблема, вот еще один способ, где, когда элемент списка является большим, он получает отрезан.

Обновлено, используя псевдо держать стрелку вниз, таким образом можно сделать 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>

Answer 2

Вы можете использовать собственность 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>