Изменить текст выбранной опции только при выборе

Question

У меня есть поле выбора, которое позволяет пользователю выбрать категорию для предмета одежды. Категории могут иметь подкатегории, поэтому для того, чтобы отобразить эту иерархию, я пишу такие опции, как это:

Category Name 
  ├─ Sub-category name 

, который выглядит следующим образом:

Категория Название

    & # x251c; & # X2500; Подкатегория

К сожалению, когда пользователь выбирает подкатегорию, текст, отображаемый в поле выбора, включает в себя символы структуры. Как отображать только название категории при выборе параметра, но сохранить структуру HTML при изменении параметров? Есть ли лучший способ показать иерархию категорий внутри опций? Optgroups не работают для меня, потому что пользователь должен также иметь возможность выбирать категории верхнего уровня.

Вот как оно выглядит сейчас.

http://jsfiddle.net/K6yfp/

Answer 1

Возможно, вы ищете optgroup

<select> 
    <optgroup label="Swedish Cars"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    </optgroup> 
    <optgroup label="German Cars"> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
    </optgroup> 
</select> 

FIDDLE

Answer 2

я придумал простое решение, но не мог тренировки больше на нем. Надеюсь, вам понравится.

HTML

<select id="Categories"> 
    <option value="Shoes">Shoes</option> 
    <option value="Sneakers">&nbsp;&nbsp;&#x251c;&#x2500;Sneakers</option> 
</select> 

JS

$(document).ready(function(){ 
    var SelectedCategory = $('#Categories').find('option:selected').val(); 
    $('#Categories').bind("change",function() { 
     $(this).find('option:selected').attr('label',$(this).find('option:selected').val()); 
     SelectedCategory = $(this).find('option:selected').val(); 
     $(this).blur(); 
    }); 

    $('#Categories').focus(function(e){ 
     e.stopPropagation(); 
     $(this).find('option:selected').removeAttr('label'); 
    }).blur(function(e){ 
     e.stopPropagation(); 
     $(this).find('option:selected').attr('label',$(this).find('option:selected').val()); 
    }); 
}); 

Примечание: Не забудьте включить JQuery Library.

Проверьте Demo Fiddle.