Вы действительно обнаружите, что идете по неверному пути, поскольку вы не можете "скрыть" элементы параметров в разных браузерах. Вам действительно нужно добавить и удалить их, чтобы изменить список.
Я собрал рабочую версию того, что вы ищете, и вы можете просмотреть его или отредактировать на JSBin.
Основной поток выглядит следующим образом:
- При загрузке страницы возьмите все параметры из
#variables
и сохраните их в хэш / массив для дальнейшего использования.
- Создайте функцию
update_variables
, которая очищает список переменных, добавляет все правильные для выбранной категории. Важной частью здесь является то, что он проверяет, есть ли у цели элемент с таким значением, и не будет добавлять его снова, поскольку он уже добавлен к цели.
- В «Добавить» просто добавьте выбранные элементы от
#variables
до #target
и отмените выбор.
- В «Удалить» просто удалите выбранные элементы из
#target
и позвоните update_variables()
Вот выборка из нескольких методов. Посмотрите на исходный код JSBin для получения всего необходимого кода:
opts
в конечном итоге выглядит так:
var opts = {
'age':[
{ label: 'Ages 18-24', value: 17 },
{ label: 'Ages 25-34', value: 18 },
{ label: 'Ages 35-44', value: 19 }
]
....
}
Вот функция update_variables
:
function update_variables(){
var cat = $cats.val(), new_opts = [];
$vars.empty();
$.each(opts[cat], function(){
if( $target.find('[value=' + this.value + ']').length === 0 ){
new_opts.push(option(this.value, this.label));
}
});
$vars.html(new_opts.join(''));
}
Примечание: функция option()
- это маленький помощник, который создает HTML для элемента option.