2

以下で、 Eric Hynds jquery-multiselectプラグインを使用してチェーン マルチセレクトを実装する必要がある場所で行き詰まりました。2 番目の選択の optgroup (サブ アクティビティ) を、 1 番目の選択(メイン アクティビティ) に応じて表示するようにしたいのですが、このような動作です。 : http://jsfiddle.net/UNbvn/ .

ここに出力サンプルがあります: http://jsfiddle.net/hsQjh/2/

<head>
<link href="jquery.multiSelect.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.multiSelect.js"></script>

<script>
function filterActivityTriggeredUser(e){ 
if($(e).attr('checked')=='checked'){
    $.userListData.filterActivity.set($(e).attr('value'), true);
    $.providerListData.filterActivity.set($(e).attr('value'), true);
}else{
    $.userListData.filterActivity.set($(e).attr('value'), false);
    $.providerListData.filterActivity.set($(e).attr('value'), false);
}   
}

function filterSubActivityTriggeredUser(e){ 
if($(e).attr('checked')=='checked'){
    $.userListData.filterSubActivity.set($(e).attr('value'), true);
    $.providerListData.filterSubActivity.set($(e).attr('value'), true);
}else{
    $.userListData.filterSubActivity.set($(e).attr('value'), false);
    $.providerListData.filterSubActivity.set($(e).attr('value'), false);
}   
}


$(document).ready(function() {

$("#filterActivity").multiSelect({
    selectAll: false,
    noneSelected: 'All',
    oneOrMoreSelected: '*'
},
filterActivityTriggeredUser);

$("#filterSubActivity").multiSelect({
    selectAll: false,
    noneSelected: 'All',
    oneOrMoreSelected: '*'
},
filterSubActivityTriggeredUser);

});
</script>
</head>

<body>

<div id="inner-main">
<div style="width:270px;float:left;">
Main Activity:
<select id="filterActivity" multiple="multiple" size="10" style="width:220px;">
    <option value=""></option>
    <optgroup label="Producer, Content Creation, Rights Holder">
        <option value="1 - Distributor/Agent" id="main1">1 - Distributor/Agent</option>
        <option value="2 - Producer/Production Company" id="main2">2 - Producer/Production Company</option>
    <optgroup label="Distribution Platforms">
        <option value="3 - TV Channel/Broadcaster" id="main3">3 - TV Channel/Broadcaster</option>
</select>
<br /><br />
Sub Activity:
<select id="filterSubActivity" multiple="multiple" size="15" style="width:220px;">
    <optgroup label="1 - Distributor/Agent" id="sub1">
        <option value="1A - Music and Sound Libraries">1A - Music and Sound Libraries</option>
        <option value="1B - HD Digital Radio">1B - HD Digital Radio</option>

    <optgroup label="2 - Producer/Production Company" id="sub2">
        <option value="2A - Animation/Computer Graphics (CGI)">2A - Animation/Computer Graphics (CGI)</option>
        <option value="2B - Co Production">2B - Co Production</option>
        <option value="2C - Sub Production">2C - Sub Production</option>

    <optgroup label="3 - TV Channel/Broadcaster" id="sub3">
         <option value="3A - Antennas, Transmitter and Towers">3A - Antennas, Transmitter and Towers</option>
        <option value="3B - Cable and Satellite">3B - Cable and Satellite</option>

</select>
</div>
</div>

</body>

どんな助けでも大歓迎です！

4

0 に答える 0