Изменить выбранный текст при выборе

Question

Как изменить выбранный текст в поле выбора с помощью jQuery?

<select>
    <optgroup label="Name">
        <option>John</option>
        <option>Mike</option>
    </optgroup> 
</select>

т.е. когда вы выбираете Джона. В окне выбора будет показано «Имя: Джон». Вместо этого просто «Джон».

Answer 1

Попробуйте:

$(document).ready(function() {
    $('#name-select').change(function() {
        var selectedItem = $('#name-select option:selected');
        var oldValue = selectedItem.text();
        var newValue = 'Name: ' + oldValue;
        selectedItem.text(newValue);
    });
});

Вам потребуется обновить опцию select, чтобы присвоить ей идентификатор:

<select id="name-select">
    <optgroup label="Name">
        <option>John</option>
        <option>Mike</option>
    </optgroup> 
</select>

А вот демонстрация jsFiddle: http://jsfiddle.net/benmajor/2m76z/

Answer 2

html:

<select id="myselect">
    <optgroup label="Name">
        <option>John</option>
        <option>Mike</option>
    </optgroup> 
</select>

js:

$("#myselect").change(function (event) {
    var o = $("#myselect option:selected")
    , v=o.text()
    , old = $("#myselect option:contains('name')")
    , oldv = old.html();

    oldv && old.html(oldv.replace('name: ',''));
    o.text('name: ' + v);
});

см .: http://jsfiddle.net/eQR2W/2/

Answer 3

Если вы добавите атрибут значения в опцию, вы можете использовать что-то подобное (и вам нужно добавить атрибут значения, иначе вы потеряете значение, если кто-то выберет значение, а затем выберет другое значение).

$("select").change(function () {
   var label = $("select option:selected").parent().attr("label");
   var val = $("select option:selected").attr("value");
   $("select option:selected").html(label+":"+val);
});