0

我有一个具有以下功能的表格：

表单的目的是获取项目代码。项目按类别分类。首先，我将显示一个选择的类别列表。一旦用户选择了特定类别，我将在第二个选择列表中仅显示属于该类别的项目。

为此，我存储了三个变量：

第一个变量包含所有项目的数组。它们按各自的类别分组为 OPTGROUP。OPTGROUP 标签是类别的描述。这个变量是隐藏的。

第二个变量是所有类别的选择列表。标签是“类别描述”，而值是“类别代码”。

第三个变量是一个空的选择列表，用于显示所选类别的项目。

我的要求是这样的：

当用户选择一个类别时，我将在隐藏变量（第一个 - 如上所述）中搜索具有与所选类别匹配的标签的 optgroup。然后我将提取该组下的所有选项（代表属于该类别的项目）并将它们附加到用于项目的空选择列表（上述第三个）。

我不想有任何 ajax 或 JSON 选项，因为我觉得一次性提取和存储选择列表可能更有效。

如何使用 jQuery 实现上述功能？

4

2 回答 2

0

我尝试了以下脚本来解决我的问题，它似乎正在工作

$(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());
    */
}
于 2012-04-05T07:18:48.990 回答
0

好吧，我认为使用 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();
})

我没有测试这段代码，但会给你一个想法

于 2012-04-04T19:13:41.227 回答