선택시 선택한 텍스트 변경

Question

jQuery를 사용하여 선택 상자에서 선택한 텍스트를 어떻게 변경합니까?

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

즉, 당신이 존을 선택하면. 선택 상자에 "Name : John"이 표시됩니다. 대신, 그냥 "존".

$(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를 제공하기 위해 당신의 선택 옵션을 업데이트해야합니다 :

Answer 1

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 2

이 시도

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

을 그리고 여기 jsFiddle 데모입니다 : http://jsfiddle.net/benmajor/2m76z/

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