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

У меня есть следующий код. Я хочу, когда опция выбрана тогда с 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 Любой орган знает, как этого добиться?

Источник

3 ответа

Решение

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

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

Это сделано.

Источник

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

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/

Источник

Если вам нужен только текст выбранной опции в optgroup select, попробуйте следующее:

var text = $("select[name='selectName'] :selected").text();
console.log(text);
Источник

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

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>

демонстрация

Источник
Другие вопросы по тегам