I'm using Eric Hynds jQuery MultiSelect Widget that is being populated from a javascript file. I'm able to dynamically add a checkbox by checking from the dropdown. I'm trying to attach the new checkbox and 'value' of the dropdown checkbox to appear under a 'Main' checkbox if it is also checked. To help illustrate with comments inside: http://jsfiddle.net/3u7Xj/12/
References:
<select id="select" multiple="multiple" class="multiselect">
</select>
<input type="checkbox" name="chkMain1" value="Main1" id="Main1"><label for="Main1">Main1</label><br />
<input type="checkbox" name="chkMain2" value="Main2" id="Main2"><label for="Main2">Main2</label><br />
<input type="checkbox" name="chkMain3" value="Main3" id="Main3"><label for="Main3">Main3</label><br />
Populating drop down widget from js file:
var MYdata=[{
"Value":"1",
"ValueText":"name1"
}
,{
"Value":"2",
"ValueText":"name2"
}
,{
"Value":"3",
"ValueText":"name3"
}];
$('#select').html(function(){
return $.map(MYdata, function(v) {
return "<option id='"+ v.Value +"'>" + v.Value + "-" + v.ValueText +"</option>";
}).join('');
});
Any help would be greatly appreciated
Hopefully this will give you some direction on how it could be done..
click: function (event, ui) {
var lbl = ui.value;
if(ui.checked){
var ctrl = '<input type="checkbox" name="chk" checked="checked" class="chk" id="'+lbl+'">';
$("[id^=Main]:checked").each(function(){
$(this).nextAll('.holder:first').append('<div>'+ctrl+lbl+'</div>');
});
}
else {
$("[id^=Main]:checked").each(function(){
$(this).nextAll('.holder:first').find('div input[id='+lbl+']').parent().remove();
});
}
if (ui.checked && $(".multiselect").children(":checked").length >= 5) {
return false;
}
}
Example:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.