How to show the optgroup value + option value as the selection

Question

Take a look at the following select:

<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>

When any element is selected I would like to display its label + value in the selection instead of just value. So if 4 is selected I would like the selection to show B - 4

Spinoff

close your optgroup tags properly – Frolick

Answer 1

if you need the selected value back to its original value... try this... 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]);

    });

});

UPDATE using the select2 plugin you can do the following 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; }
});

Entophyte

Any idea how to do it using the Select2 jquery plugin? – Spinoff

you'll have to modify the plugins source code or trigger the above code in a select2-plugin callback (if any). – Entophyte

Your demo has a bug (I don't understand why), but changing opt to opt = $(item.element); fixes it. – Tercet

Addition of selected value and bug fix based on comment by @ArturoTorresSánchez : jsfiddle.net/bJxFR/58 – Basket

Answer 2

Its hacky to update the selected value but check out this demo

Hacky Demo

$('#select').change(function () {
    var selectedOption = $('#select option:selected');
    var label = selectedOption.closest('optgroup').attr('label');
    var selectText = selectedOption.text();

    var length = $(this).find(':selected').text().length;

    if (length < 2) {
        $(this).find(':selected').text(label + ' - ' + selectText);
    }
});

Becerra

How would it be using Select2? – Spinoff

i didn't get you.. I have added the demo, please look at that – Becerra

That's great, now try setting the selects value to a value that isn't in any of the options ! – Remittent

I'm using the Select2 plugin for jquery as stated above. It needs to be done using its options or it wouldn't work. – Spinoff

oops I missed that .. sorry – Becerra

Answer 3

Try this:

jsFiddle here

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

});

Pitzer

Any idea how to do it using the Select2 jquery plugin? – Spinoff

Please put together a jsfiddle example, fully mocked-up, and including the Select2 plugin (you should be able to load the js via the jsDelivr CDN site -- use the external resources accordion tab and paste the URL minus the http: prefix. – Pitzer

@Spinoff Here, I mocked-up an empty jsFiddle shell for your question, with the Select2 plugin pre-loaded. (See External Resources accordion). Just add HTML/jQuery code to demonstrate what is not working, and UPDATE. Then edit your original question and post the revised URL as a jsFiddle link. [jsFiddle here](http://jsfiddle.net/xxxxxx/) – Pitzer

Ok, here it is: jsfiddle.net/bJxFR/3 Try to select any of the values. If you select 1, the dropdown will say 1, if you select 5 it will say 5. I want it to say A - 1 or B - 5. – Spinoff

Doesn't work when selecting the same option twice. I didn't find a solution for that particular issue though. – Glassine