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());
    */
}

动态更改选择列表

2 个答案: