動態更改選擇列表

我有一個具有以下功能的表單：動態更改選擇列表

表單的目的是獲取物品代碼。項目按類別分類。首先我會顯示一個選擇的類別列表。一旦用戶選擇了一個特定的類別，我將只在第二個選擇列表中顯示屬於該類別的項目。

爲此，我存儲了三個變量。
第一個變量包含所有項目的數組。它們分別與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

動態更改選擇列表

回答

相關問題