Как в select в выбранном option менять текст?

Question

[zlFast]

Есть select

<select>
    <option>2011</option>
    <option>2012</option>
    <option>2013</option>
    <option>2014</option>
    <option>2015</option>
    <option>2016</option>
</select>

Нужно, чтобы в выбранном option текст немного менялся, например, выбрали 2012, но в select на странице должно быть написано не 2012, а "от 2012". Но в отрывающемся списке должно быть только 2012 написано.

Answer 1

[Денис]

Пример в песочнице

var sel = document.querySelector('select');
sel.options[0].textContent = 'от ' + sel.options[0].textContent;
sel.addEventListener('change', function(){
	var curIndex = this.selectedIndex;
    [].forEach.call(this.options,function(opt, i){
    	if(i === curIndex) {
        	opt.textContent = 'от ' + opt.textContent;
        } else {
        	opt.textContent = opt.textContent.replace(/[^\d]+/,'');
        }
    });
});

Или чуть покороче, изменив цикл

[].forEach.call(this.options,function(opt, i){
    opt.textContent =  i === curIndex ? 'от ' + opt.textContent : opt.textContent.replace(/[^\d]+/,'');
});

Comments

[zlFast]

Спасибо, как вариант, но в таком случае меняется и сам option, то есть в списке он будет с "от"

[Денис]

zlFast такой вариант устроит?

[zlFast]

Денис: да, спасибо

[zlFast]

Денис: А так, чтобы не пропадало, можно сделать? То есть как в первом варианте, только чтобы в списке этот option был без "от"?

[Денис]

zlFast хоть ученые и утверждают, что согласно принципу неопределенности Гейзенберга квантовая частица может находится одновременно в нескольких местах, но это к JS точно не относится :) Теоретически, можно попробовать добавлять фейковый элемент и работать с ним, но есть ли в таком способе подводные камни - не знаю, не проверял.

[Денис]

zlFast кстати, можно использовать кастомный select. Тогда получите ровно то, что вы и хотели, даже больше - кастомный select можно стилями "разукрасить" в тон своего проекта. Вот примерчик. Реальный select специально не прятал для наглядности.

[zlFast]

Денис: Здравствуйте, я нашёл баг:) Может вы знаете как его убрать, вот ваш пример https://jsfiddle.net/6bwwueto/2/ дело в том, что если выбрано, допустим, 2015 и если из списка выбрать снова 2015, тогда 2015 будет отображаться без предлога "от" спереди.

[Денис]

zlFast почему же баг? Вполне объяснимое поведение. Если выбран уже 2015 год, то его повторный выбор не вызывает события change, т.к. значение не изменилось. Элемент select - это вообще отдельная и больная тема фронтенда и я всегда выбираю один из двух подходов: оставить как есть или использовать кастомный. Могу такой вариант предложить, но и он имеет недостатки. Кстати о вариантах, я вам выше предлагал еще два (с фейковым option и кастомный select). Они тоже не подошли?

[zlFast]

Денис: подошли, просто думал может есть ещё какое событие кроме "change", которое срабатывает после выбора option. Событие "click", я смотрю, срабатывает, но оно срабатывает так же и при открытии селекта.