Question

如何使用jQuery更改选择框中的选定文本？

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

即，当你选择约翰时。选择框将显示“姓名：John”。相反，仅仅是“约翰”。

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);
    });
});

您需要更新您的选择选项，以便为其提供ID：

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

这是jsFiddle演示：http://jsfiddle.net/benmajor/2m76z/

Answer 2

如果你为选项添加一个值属性，你可以使用这样的东西（你需要添加一个值属性，否则如果有人选择一个值，然后选择另一个值，你将失去该值。）

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

Answer 3

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/

选中时更改所选文本

3 个答案: