动态更改选择列表

我有一个具有以下功能的表单：动态更改选择列表

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

为此，我存储了三个变量。
第一个变量包含所有项目的数组。它们分别与OPTGROUP分组。 OPTGROUP标签是类别的描述。这个变量是隐藏的。

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

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

我的要求是这样的：

当用户选择一个类别

，我将搜索隐变量（第一个 - 如上所述）用于具有标签所选择的类别相匹配的OPTGROUP。那么我将提取该组下的所有选项（它们表示属于该类别的项目）并将它们附加到用于项目的空白选择列表（上述第三个选项）。

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

请帮我用jQuery实现上述功能。

的问候和感谢事先

来源

2012-04-04 jprakash s

你可以请分享你正在采取刺的代码？ - （代表[chriseverson]（http://stackoverflow.com/users/1313411/chriseverson）） – 2012-04-04 17:13:28

我需要在jQuery中完成它。我使用cakephp框架来生成表单。现在缺少项目选择列表的动态部分。我想通过jQuery的 – 2012-04-04 17:23:41

好，我想这使用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-04 19:13:41

$（文件）。就绪（函数（）{\t \t \t $（ “＃catKey”）。重点（ \t \t \t功能（）{\t \t \t \t $获得该功能（ “#itemKey”）。empty（）; \t \t \t $（“input”）。css（“font-style”，“italic”）; \t \t} \t \t）; （“＃catKey”）。change（onSelectChange）; }）; 功能\t onSelectChange（）\t { \t $ catSelected = jQuery的（ '＃catKey选项：选择'）VAL（）; \t $（“＃itemKey”）。empty（）; （'＃itemKey'）;（'＃itemKeys optgroup [label ='+ $ catSelected +']'）。children（）。clone（）。appendTo（“＃itemKey”）; （“＃itemKey”）。append（$（'＃itemKeys optgroup [label ='+ $ catSelected +']'）。children（））; */ } – 2012-04-05 07:13:59

我试了下面的脚本来解决我的问题，它似乎工作

$(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-05 07:18:48

动态更改选择列表

回答

相关问题