We Keep Coding

how to update multiselect for dropdownlistfor list in chosen in mvc?

I have a taken a dropdown
#Html.DropDownListFor(model => Model.AccountManagerId, Model.AccountManagerList, new { #class = "form-control multiselect", #onchange = "GetPartnerNameList()", #multiple = "multiple" })
#Html.HiddenFor(model => Model.AccountManagerId)
here is a result
when I select it 2 or all list in dropdown then I got a result in
hidded value like "1,2"
but during edit it was not in selected if I hidded value is "1,2"
here is a html code below which I got in Bowser
<div class="col-md-7">
<span class="multiselect-native-select">
<select class="form-control multiselect" id="AccountManagerId" multiple="multiple" name="AccountManagerId" onchange="GetPartnerNameList()">
<option value="1">julie.piper#pe.gy</option>
<option value="2">rebecca.millward#pe.gy</option>
<option value="3">penny.crudgington#pe.gy</option>
</select>
<div class="open">
<button type="button" class="multiselect dropdown-toggle form-control" style="text-align:left;width:50%;" data-toggle="dropdown" title="All">
<span class="multiselect-selected-text">All</span>
<b class="caret" style="float:right;margin-top:5px;"></b>
</button>
<ul class="multiselect-container dropdown-menu" style="width:50%;">
<li class="multiselect-item multiselect-filter" value="0">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input class="form-control multiselect-search" type="text" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default multiselect-clear-filter" type="button">
<i class="glyphicon glyphicon-remove-circle"></i>
</button>
</span>
</div>
</li>
<li class="multiselect-item multiselect-all">
<a tabindex="0" class="multiselect-all">
<label class="checkbox">
<input type="checkbox" name="true" value="multiselect-all"> Select all </label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox" title="julie.piper#pe.gy">
<input type="checkbox" value="1"> julie.piper#pe.gy </label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox" title="rebecca.millward#pe.gy">
<input type="checkbox" value="2"> rebecca.millward#pe.gy </label>
</a>
</li>
<li>
<a tabindex="0">
<label class="checkbox" title="penny.crudgington#pe.gy">
<input type="checkbox" value="3"> penny.crudgington#pe.gy </label>
</a>
</li>
</ul>
</div>
</span>
<input id="AccountManagerId" name="AccountManagerId" type="hidden" value="1,2">
<br>
</div>
how can I select dropdown list if AccountManagerId hidden value="1,2" or value="1,2,3"

How to toggle selected or clicked element not all

Am trying to toggle only clicked element and adding some class to it but it's applying to all.
How can i do that?.any suggestion would be helpful.thank you
$("li").click(function(e){
$(".checkbox span").toggleClass("checked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
Wordz
<label class="checkbox">
<input type="checkbox" />
<span class="secondary"></span>
</label>
</li>
<li>
Phraser
<label class="checkbox">
<input type="checkbox" />
<span class="secondary"></span>
</label>
</li>

You can use $(this) to get current li clicked and depending on that add your class.
Demo Code:
$("li").click(function(e) {
//cuurent li->span->addclass
$(this).find('span').toggleClass("checked");
});
.checked {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li> Wordz
<label class="checkbox">
<input type="checkbox" />
<span class="secondary">Something</span>
</label>
</li>
<li>
Phraser
<label class="checkbox">
<input type="checkbox" />
<span class="secondary">Something</span>
</label>
</li>
</ul>

select checkbox on input textbox by jquery

This is javascript:
$('.chkbx').click(function(){
var text = "";
$('.chkbx:checked').each(function(){
text += $(this).val()+',';
});
text = text.substring(0,text.length-1);
$('#textbx').val(text);
});
When I select numbers in the checkbox, It does not work in the input textbox.
JSFiddle

You can use .change event instead of .click like below,
$('.chkbx').change(function() {
// this will contain a reference to the checkbox
var text = "";
$('.chkbx:checked').each(function() {
text += $(this).val() + ',';
});
text = text.substring(0, text.length - 1);
console.log(text)
$('#textbx').val(text);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="cat_list">
<li>
<input id="1" value="1" type="checkbox" class="chkbx" name="cat[]">
<label for="1" class="selectit">1</label>
<ul class="children">
<li>
<input id="11" value="11" type="checkbox" class="chkbx" name="cat[]">
<label for="11" class="selectit">11</label>
<ul class="children">
<li>
<input id="111" value="111" type="checkbox" class="chkbx" name="cat[]">
<label for="111" class="selectit">111</label>
</li>
<li>
<input id="112" value="112" type="checkbox" class="chkbx" name="cat[]">
<label for="112" class="selectit">112</label>
</li>
</ul>
</li>
<li>
<input id="12" value="12" type="checkbox" class="chkbx" name="cat[]">
<label for="12" class="selectit">12</label>
</li>
<li>
<input id="13" value="13" type="checkbox" class="chkbx" name="cat[]">
<label for="13" class="selectit">13</label>
</li>
<li>
<input id="14" value="14" type="checkbox" class="chkbx" name="cat[]">
<label for="14" class="selectit">14</label>
</li>
<li>
<input id="15" value="15" type="checkbox" class="chkbx" name="cat[]">
<label for="15" class="selectit">15</label>
<ul class="children">
<li>
<input id="151" value="151" type="checkbox" class="chkbx" name="cat[]">
<label for="151" class="selectit">151</label>
</li>
<li>
<input id="152" value="152" type="checkbox" class="chkbx" name="cat[]">
<label for="152" class="selectit">152</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<br/><br/>
<input type='text' id='textbx' value='' />

How do I get the dynamically loaded element that was clicked with jQuery

I am dynamically loading content into my page. When one of the images is clicked I need to de-select all the others and select the checkbox of the one that has been clicked. I need to do this if either the image, text of checkbox is clicked.
this contains all the li elements, not just the one that was clicked.
Can anyone suggest how I can identify which of the li elements was the one that triggered the code?
$('#colours').click('li', function() {
$(this).children('li').find('input').prop('checked', false);
$(this).find('input').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
<li>
<label for="">
<img src="swatch-1.jpg" alt=""><input type="checkbox" value="1"> <span>Red</span>
</label>
</li>
<li>
<label for="">
<img src="swatch-2.jpg" alt=""><input type="checkbox" value="2"> <span>Green</span>
</label>
</li>
<li>
<label for="">
<img src="swatch-3.jpg" alt=""><input type="checkbox" value="3"> <span>Blue</span>
</label>
</li>
</ul>

Firstly it appears that you're attempting to create a delegated event handler, however your syntax for that is not correct and is the cause of your problem. You need to use on() with an event name and selector instead of click. From there you can select the li directly using the this reference, something like this:
$('#colours').on('click', 'li', function() {
$('#colours li').find('input').prop('checked', false);
$(this).find('input').prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
<li>
<label>
<img src="swatch-1.jpg" alt="">
<input type="checkbox" value="1">
<span>Red</span>
</label>
</li>
<li>
<label>
<img src="swatch-2.jpg" alt="">
<input type="checkbox" value="2">
<span>Green</span>
</label>
</li>
<li>
<label>
<img src="swatch-3.jpg" alt="">
<input type="checkbox" value="3">
<span>Blue</span>
</label>
</li>
</ul>
However, the behaviour you're creating here, where only one checkbox can be selected at any one time, is identical to the standard behaviour of radio input elements. As such, it would make more sense to just use those instead. That way you don't need any JS code at all:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="colours">
<li>
<label>
<img src="swatch-1.jpg" alt="">
<input type="radio" name="swatch" value="1">
<span>Red</span>
</label>
</li>
<li>
<label>
<img src="swatch-2.jpg" alt="">
<input type="radio" name="swatch" value="2">
<span>Green</span>
</label>
</li>
<li>
<label>
<img src="swatch-3.jpg" alt="">
<input type="radio" name="swatch" value="3">
<span>Blue</span>
</label>
</li>
</ul>

Issue in multi select filter

I need to filter using multiselct ,data attribute . it is working but not as expected
here is my code
<ul>
<li>
<div class="sts">
<h1>filter 1</h1>
<div class="checkbox">
<label>
<input data-id="1" data-type="st" class="stat st" type="checkbox" />1
</label>
</div>
<div class="checkbox">
<label>
<input data-id="2" data-type="st" class="stat st" type="checkbox" />2
</label>
</div>
<div class="checkbox">
<label>
<input data-id="3" data-type="st" class="stat st" type="checkbox" />3
</label>
</div>
</div>
</li>
<li>
<h1>filter 2</h1>
<div class="ats">
<div class="checkbox">
<label>
<input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo
</label>
</div>
<div class="checkbox">
<label>
<input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar
</label>
</div>
</div>
</li>
<li>
<h1>filter 3</h1>
<div class="dpts">
<div class="checkbox">
<label>
<input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a
</label>
</div>
<div class="checkbox">
<label>
<input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b
</label>
</div>
<div class="checkbox">
<label>
<input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c
</label>
</div>
<div class="checkbox">
<label>
<input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d
</label>
</div>
</div>
</li>
</ul>
<ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="2" data-dpt="c">qwedf</li>
<li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-at="bar" data-st="3" data-dpt="b">tazxsw</li>
<li data-at="bar" data-st="1" data-dpt="b">zxcvb</li>
<li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-at="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>
Here is my script
<script>
$('.stat').on('click', function() {
var $stats = $('.stat:checked');
var $items = $('.list li');
if ($stats.length == 0) {
$items.show();
return;
}
$items.hide();
$stats.each(function() {
var $stat = $(this);
$items.filter(function() {
return $(this).data($stat.data('type')) == $stat.data('id');
}).show();
})
});
</script>
If i select any one from each fliter it is working fine , but when i select from same filter it should perform logical OR but it is performing logical AND.
Here is the fiddler lik

I'm struggling with this same problem as durai. I updated the fiddle, please make selections as instructed at the top of the page and you'll see the problematic case.
<ul class="list">
<li data-at="foo" data-st="1" data-dpt="a">asdw</li>
<li data-at="boo" data-st="3" data-dpt="c">qwedf</li>
<li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
<li data-at="bar" data-st="3" data-dpt="a">this should be visible (when filters: 3 | bar | a&b)</li>
<li data-at="bar" data-st="2" data-dpt="b">zxcvb</li>
<li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
<li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
<li data-at="bar" data-st="3" data-dpt="b">this should be visible (when filters: 3 | bar | a&b)</li>