Показать выбранную опцию с меткой группы в <optgroup>

Question

У меня есть следующий код. Я хочу, когда опция выбрана, тогда с selected option следует показать, как ее можно достичь group label?

<select id='#grp_option'> 
<optgroup label="Group 1"> 
<option>Option 1.1</option> 
</optgroup> 
<optgroup label="Group 2"> 
<option>Option 2.1</option> 
<option>Option 2.2</option> 
</optgroup> 
<optgroup label="Group 3" disabled> 
<option>Option 3.1</option> 
<option>Option 3.2</option> 
<option>Option 3.3</option> 
</optgroup> 
</select> 

Я попытался в JQuery & гугле вне, но никакого решения я не нашел. Я попробовал сценарий как onchange

function showLabel(e){ 
var selected = $('#grp_option :selected'); 
var id = #grp_option; 
var cu_label = $(selected).val(); 
var label=$(selected).parent().attr('label') + ' - '; 
var tlabel = label + cu_label; 
//$(id).text(tlabel); 
console.log(tlabel); 
} 

В console.log я получаю Группа 2 - Вариант 2.1. Но я хочу показать это в select input value Любое тело знает, как его достичь?

Answer 1

Добавьте значения то, что вы хотите показать. Как я уже сделал.

<select id='grp_option'> 
    <optgroup label="Group 1"> 
    <option value='Group 1 - Option 1.1'>Option 1.1</option> 
    </optgroup> 
    <optgroup label="Group 2"> 
    <option value='Group 2 - Option 2.1'>Option 2.1</option> 
    <option value='Group 2 - Option 2.2'>Option 2.2</option> 
    </optgroup> 
</select> 

Затем просто добавьте этот сценарий. Здесь вы найдете

$('#grp_option option').each(function() { 
    $(this).data('txt', $(this).text()); 
}); 

$('#grp_option').change(function() { 
$('option', this).each(function() { 
    $(this).text($(this).data('txt')); 
}); 

$(this).find('option:selected').text($(this).find('option:selected').attr('value')); 
}); 

Его сделано.

Answer 2

Попробуйте это,

function showLabel(e){ 
var selected = $('#grp_option :selected'); 
var id = '#grp_option'; 
var cu_label = $(selected).val(); 
var label=$(selected).parent().attr('label') + ' - '; 
var tlabel = label + cu_label; 
//$(id).text(tlabel); 
console.log(tlabel); 
} 

И изменить идентификатор выпадающего #grp_option к grp_option как

<select id='grp_option'> 

также добавить атрибут value всем options как,

<option value="3.1">Option 3.1</option> 
<option value="3.2">Option 3.2</option> 

Demo

Answer 3

Вы были близки! Попробуйте это:

HTML

<label id="target" for="grp_option">Selected: </label> 
<br/> 
<select id="grp_option"> 
    <optgroup label="Group 1"> 
     <option>Option 1.1</option> 
    </optgroup> 
    <optgroup label="Group 2"> 
     <option>Option 2.1</option> 
     <option>Option 2.2</option> 
    </optgroup> 
    <optgroup label="Group 3" disabled> 
     <option>Option 3.1</option> 
     <option>Option 3.2</option> 
     <option>Option 3.3</option> 
    </optgroup> 
</select> 

JS

$(document).ready(function() { 
    $('#grp_option').on('change', function() { 
     showLabel(); 
    }); 

    // fire on page load 
    $('#grp_option').change(); 
}); 

function showLabel() { 
    var selected = $('#grp_option :selected'); 
    var item = selected.text(); 
    var group = selected.parent().attr('label'); 
    $('#target').text('Selected: ' + group + ' - ' + item); 
} 

Вот рабочая скрипку: http://jsfiddle.net/ojj0L7ht/