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 set element value and run function on load Javascript

I'm trying to refactor a small Javascript function that simply adds an active class to the parent <div> of a series of radio buttons on page load as well as via a change.
My function is:
function toggleActiveState (event) {
const el = event.target
const parent = el.closest('[data-toggle-has-btn-group]')
const buttons = parent.getElementsByClassName('js__btn-toggle')
var i
for (i = 0; i < buttons.length; i++) {
buttons[i].classList.remove('active')
}
el.parentElement.classList.add('active')
}
My markup is:
<div class="form-group">
<div class="btn-group-toggle d-flex flex-row" data-toggle="buttons" data-toggle-has-btn-group>
<label class="btn btn-custom btn-outline-primary btn-sm active flex-fill mr-1 js__btn-toggle">
<input type="radio" name="options" id="option1" value="Mr" checked onclick="toggleActiveState(event)"> Mr
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
<input type="radio" name="options" id="option2" value="Mrs" onclick="toggleActiveState(event)"> Mrs
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
<input type="radio" name="options" id="option3" value="Miss" onclick="toggleActiveState(event)"> Miss
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill ml-1 js__btn-toggle">
<input type="radio" name="options" id="option4" value="Other" onclick="toggleActiveState(event)"> Other
</label>
</div>
</div>
When clicking a radio button, the toggleActiveState(event) runs and I'm able to remove the active classes and add a class to the input I clicked.
I have multiple of these .btn-group-toggle elements on the page.
What I need to do is be able to set the active class state of say the Mrs element on page load and it's value by calling my function like so:
toggleActiveState('options', 'Mrs') and then this would be active, and selected...
Any ideas?

You can add event listener on window load and add the class there. Like I've done below based on your code.
function toggleActiveState (event) {
const el = event.target
const parent = el.closest('[data-toggle-has-btn-group]')
const buttons = parent.getElementsByClassName('js__btn-toggle')
var i
for (i = 0; i < buttons.length; i++) {
buttons[i].classList.remove('active')
}
el.parentElement.classList.add('active')
}
window.addEventListener('load', () => {
const checkedInput = document.querySelector('input[type="radio"]:checked');
checkedInput.parentElement.classList.add('active');
})
.active {
color: red;
}
<div class="form-group">
<div class="btn-group-toggle d-flex flex-row" data-toggle="buttons" data-toggle-has-btn-group>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mr-1 js__btn-toggle">
<input type="radio" name="options" id="option1" value="Mr" checked onclick="toggleActiveState(event)"> Mr
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
<input type="radio" name="options" id="option2" value="Mrs" onclick="toggleActiveState(event)"> Mrs
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill mx-1 js__btn-toggle">
<input type="radio" name="options" id="option3" value="Miss" onclick="toggleActiveState(event)"> Miss
</label>
<label class="btn btn-custom btn-outline-primary btn-sm flex-fill ml-1 js__btn-toggle">
<input type="radio" name="options" id="option4" value="Other" onclick="toggleActiveState(event)"> Other
</label>
</div>
</div>

likert scale toggle effect missing-Bootstrap with Blaze Meteor

I have the following html displaying a scale 1-5, I get the value that is clicked but it seems as it does not toggle or change the color when a number is clicked it only changes the color temporarily as shown in file attached
<div class="row">
<div class="btn-toolbar mr-2" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group" role="group" aria-label="likert group">
<div class="btn-group btn-group-toggle mr-2" data-toggle="buttons">
<a class="btn btn-link disabled ml-5" disabled>Totally Not</a>
<label class="btn btn-success" >
<input type="radio" name="likert" value="1" autocomplete="off">1
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="2" autocomplete="off">2
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="3" autocomplete="off">3
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="4" autocomplete="off">4
</label>
<label class="btn btn-success ">
<input type="radio" name="likert" value="5" autocomplete="off">5
</label>
<a class="btn btn-link disabled" disabled>Very Much</a>
</div>
</div>
</div>
</div>
How can I make it maintain the toggle effect once it is selected?Is there something missing from the above code ?
(I use Meteor Blaze framework with Bootstrap 4)

The solution was to add the below javascript file of npm module in meteor js file
import 'bootstrap/dist/js/bootstrap.bundle'

if value is '{{user->experience}}' add class 'active' on label laravel or javascript

How to add 'active' on label class like after checking value from database with laravel {{$user->experience}} . if value is Entry-Level add 'active' on label class .
Here is my HTML Content
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success active" for="option1">
<input type="radio" name="experience" id="option1" value="Student">Student
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary" for="option2">
<input type="radio" name="experience" id="option2" value="Entry-Level">Entry-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info" for="option3">
<input type="radio" name="experience" id="option3" value="Mid-Level">Mid-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default" for="option4">
<input type="radio" name="experience" id="option4" value="Senior-Level">Senior-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning" for="option5">
<input type="radio" name="experience" id="option5" value="Manager">Manager
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger" for="option6">
<input type="radio" name="experience" id="option6" value="Director" >Director
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>
Here is my css
.btn span.glyphicon {
opacity: 0;
}
.btn.active span.glyphicon {
opacity: 1;
}
My laravel value fetching
{{$user->experience}}
Mysql 'user' Table
- id name experience
- 1 john Entry-Level
Website : JsFeed

You can use ternary operators to achieve your goal.
<label
class="btn btn-success {{$user->experience == 'Entry-Level' ? 'active' : ''}}"
for="option1"
>

You can use ternary operator to achieve this or you can use If.
{{$user->experience == 'Entry-Level'?'active':''}}
Here is an example.
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success {{$user->experience == 'Entry-Level'?'active':''}}" for="option1">
<input type="radio" name="experience" id="option1" value="Student">Student
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary" for="option2">
<input type="radio" name="experience" id="option2" value="Entry-Level">Entry-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info" for="option3">
<input type="radio" name="experience" id="option3" value="Mid-Level">Mid-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default" for="option4">
<input type="radio" name="experience" id="option4" value="Senior-Level">Senior-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning" for="option5">
<input type="radio" name="experience" id="option5" value="Manager">Manager
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger" for="option6">
<input type="radio" name="experience" id="option6" value="Director" >Director
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>

Use a ternary operator to toggle the class active and the checked attribute
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success {{$user->experience == 'Student'?'active':''}}" for="option1">
<input type="radio" name="experience" id="option1" {{$user->experience == 'Student'?'checked':''}} value="Student">Student
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-primary {{$user->experience == 'Entry-Level'?'active':''}}" for="option2">
<input type="radio" name="experience" id="option2" {{$user->experience == 'Entry-Level'?'checked':''}} value="Entry-Level">Entry-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-info {{$user->experience == 'Mid-Level'?'active':''}}" for="option3">
<input type="radio" name="experience" id="option3" {{$user->experience == '>Mid-Level'?'checked':''}} value="Mid-Level">Mid-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-default {{$user->experience == 'Senior-Level'?'active':''}}" for="option4">
<input type="radio" name="experience" id="option4" {{$user->experience == 'Senior-Level'?'checked':''}} value="Senior-Level">Senior-Level
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-warning {{$user->experience == 'Manager'?'active':''}}" for="option5">
<input type="radio" name="experience" id="option5" {{$user->experience == 'Manager'?'checked':''}} value="Manager">Manager
<span class="glyphicon glyphicon-ok"></span>
</label>
<label class="btn btn-danger {{$user->experience == 'Director'?'active':''}}" for="option6">
<input type="radio" name="experience" id="option6" {{$user->experience == 'Director'?'checked':''}} value="Director" >Director
<span class="glyphicon glyphicon-ok"></span>
</label>
</div>

javascript find which label.btn clicked on

I am kinda new to javascript and I checked lessons on w3 about javascript but i did not get my answer so far.
I have a question and 4 options and I want to change the color of label.btn that clicked on.
javascript:
$(function(){
$("label.btn").on('click',function () {
var choice = $(this).find('input:radio').val();
$( "#answer" ).html( $(this).checking(choice) );
ClickedLabel.style.backgroundColor = "black"; // I want to change te color here
});
///
};
html:
<div class="modal-body">
<div class="quiz" id="quiz" data-toggle="buttons">
<label id="first" class="element-animation1 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="1">1 One</label>
<label id="second" class="element-animation2 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="2">2 Two</label>
<label id="third" class="element-animation3 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="3">3 Three</label>
<label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block"><span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span> <input type="radio" name="q_answer" value="4">4 Four</label>
</div>
</div>
Any help would be appreciated, Thanks!

A)
Run my code and switch between the options.
$(function(){
$("label.btn").on('click',function () {
$("label.btn").css('background-color','transparent');
$(this).css('background-color','red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<div class="quiz" id="quiz" data-toggle="buttons">
<label id="first" class="element-animation1 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="1">1 One</label>
<label id="second" class="element-animation2 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="2">2 Two</label>
<label id="third" class="element-animation3 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="3">3 Three</label>
<label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="4">4 Four</label>
</div>
</div>
OR
In this example I used the closest method to find the wrapper label of the clicked radio button and used .css('background-color','red') to change its color. Also I wrote $("label.btn").css('background-color','transparent'); to reset the color of all options to transparent in each click first.
$(function(){
$("input").on('click',function () {
$("label.btn").css('background-color','transparent');
$(this).closest("label").css('background-color','red');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<div class="quiz" id="quiz" data-toggle="buttons">
<label id="first" class="element-animation1 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="1">1 One</label>
<label id="second" class="element-animation2 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="2">2 Two</label>
<label id="third" class="element-animation3 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="3">3 Three</label>
<label id="fourth" class="element-animation4 btn btn-lg btn-primary btn-block">
<span class="btn-label"><i class="glyphicon glyphicon-chevron-right"></i></span>
<input type="radio" name="q_answer" value="4">4 Four</label>
</div>
</div>
B)
Another way is to toggle a active class on the clicked item. I have been written an example based on this way HERE. Toggle a class is a nice way ;)

$(this) will be the label that was clicked. You can use jquery to change the background color through .css
Instead of
ClickedLabel.style.backgroundColor = "black";
you can use
$(this).css('background-color', 'black');
If you would rather use style.backgroundColor you can get the base element and modify that:
$(this)[0].style.backgroundColor = "black";

$(this).css("background-color","black");