Динамическое изменение списка выбора

Question

У меня есть следующие формы:

Целью данной формы является получение кода товара. предметы классифицируются по категориям. сначала я покажу выбранный список категорий. как только пользователь выбирает определенную категорию, я покажу только элементы, принадлежащие этой категории, во втором списке выбора.

Для этой цели я храню три переменные.
Первые переменные содержат массив ВСЕХ элементов. Они группируются с соответствующими категориями как OPTGROUP. Лейбл OPTGROUP - это описание категории. эта переменная скрыта.

Вторая переменная - это список избранных категорий. метка - это «описание категории», а значение - «код категории».

Третья переменная представляет собой пустой список выбора, предназначенный для отображения элементов выбранной категории.

мое требование заключается в следующем:

, когда пользователь выбирает категорию, я буду искать скрытую переменную (первый один - как указано выше) для OPTGROUP, имеющего метку, соответствующую выбранной категории. то я извлечу все параметры под этой группой (которые представляют элементы, принадлежащие этой категории), и добавлю их в пустой список выбора (третий описанный выше), предназначенный для элементов.

Я не хочу иметь какой-либо опции ajax или JSON, потому что чувствую, что извлечение и сохранение списков выбора за один раз может быть более эффективным.

, пожалуйста, помогите мне достичь вышеупомянутой функциональности, используя jquery.

привет и спасибо заранее

Answer 1

хорошо, я думаю, самый простой способ осуществить это с помощью JQuery используют селекторы, вы можете просто генерировать HTML, который выглядит следующим образом:

<select id="myCategories"> 
    <option value="cat1">Category 1</option> 
    <option value="cat2">Category 2</option> 
</select> 
<select id="myItems"> 
    <option OPTGROUP="cat1">item 1</option> 
    <option OPTGROUP="cat2">item 2</option> 
    <option OPTGROUP="cat1">item 3</option> 
</select> 

и код JavaScript:

var $myCategories = $(select#myCategories); 
var $myItems = $(select#myItems); 
// you can start with all options hidden 
$myItems.find('option').hide(); 

myCategories.change(function() { 
// we hide all options 
    $myItems.find('option').hide(); 
// we show the categoies options 
    $myItems.find('option[OPTGROUP="' +myCategories.val()+ '"]').show(); 
}) 

Я не проверял этот код, но даст вам идею

Answer 2

я попробовал следующий сценарий, чтобы решить мою проблему, и это, кажется, работает

$(document).ready(function(){ 

    $("#catKey").focus(
     function() { 
     $("#itemKey").empty(); 
     $("input").css("font-style", "italic"); 
    } 
    ); 
    $("#catKey").change(onSelectChange); 
}); 


function onSelectChange() { 
    $catSelected = jQuery('#catKey option:selected').val(); 
    $("#itemKey").empty(); 
    $('#itemKeys optgroup[label= ' + $catSelected + ']').children().clone().appendTo("#itemKey"); 

    /* 
    $("#itemKey").append($('#itemKeys optgroup[label= ' + $catSelected + ']').children()); 
    */ 
}