jquery - optgroup 値 + オプション値を選択として表示する方法

Question

次の選択を見てください。

<select>
<optgroup label="A">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<optgroup label="B">
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
</select>

要素が選択されている場合、値だけではなく、そのラベルと値を選択範囲に表示したいと思います。したがって、4 が選択されている場合、選択範囲に B - 4 を表示したいと思います

Answer 1

選択した値を元の値に戻す必要がある場合...これを試してください... http://jsfiddle.net/kasperfish/sxvW2/2/

$('select').change(function () {
    var opt = $(this).find(':selected');
    var sel = opt.text();
    var og = opt.closest('optgroup').attr('label');
    //alert(sel);
    //alert(og);

    $(this).blur().find(':selected').text(sel + '-' + og);

});

$('select').focus(function () {
    $(this).find('option').each(function(){
        console.log($(this).text());
        t=$(this).text().split('-');
        $(this).text(t[0]);

    });

});

select2プラグインを使用して更新すると、次のことができます http://jsfiddle.net/kasperfish/bJxFR/4/

function format(item) {
       opt = $('select').find(':selected');
       sel = opt.text();
       og = opt.closest('optgroup').attr('label');
      return item.text+'-'+og;

}
$("select").select2({
formatSelection: format,
escapeMarkup: function(m) { return m; }
});

Answer 2

これを試して：

ここでjsFiddle

HTML:

<select>
    <optgroup label="A">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <optgroup label="B">
            <option value="">4</option>
            <option value="">5</option>
            <option value="">6</option>
</select>

jQuery/javascript:

$('select').change(function () {
    var opt = $(this).find(':selected');
    var sel = opt.text();
    var og = opt.closest('optgroup').attr('label');
    //alert(sel);
    //alert(og);

    $(this).find(':selected').text(sel + '-' + og);

});