Develop Reference

Why is chosen preventing a JavaScript conditional from working properly?

There are two snippets below. I'm using Bootstrap 3 and Chosen for my select menus.
The functionality with the following is that when a specific selection is made (i.e.; Social Services), then a second select menu displays. That menu goes away if Defendant, Minor or Witness are selected. The piece that controls this is here:
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
Snippet 1: I am able to use chosen, but when I select Social Services, the second select menu doesn't come up. In order for chosen to work, the chosen class must be set to a width: 100%;, which is this piece:
$(".chosen-select").chosen({
width: "100%"
});
$(".chosen-select").chosen({
width: "100%"
});
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>
Snippet 2: If I remove the snippet:
$(".chosen-select").chosen({
width: "100%"
});
...then the select menu turns back into it's native format (without chosen) and allows me to choose Social Services and display the second select menu, but the chosen functionality doesn't work in that first select menu.
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>
The only difference here is this:
$(".chosen-select").chosen({
width: "100%"
});
Does anyone know why this is happening or if there is a workaround for it?

The issue is because Chosen raises jQuery-based events, so using addEventListener() won't detect them. You need to use jQuery's on() method instead:
$(".chosen-select").chosen({
width: "100%"
});
$("#form1").on("change", function() {
$("#form2").toggle(this.value == 4 || this.value == 5);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>

multiple selectpicker, disable option if selected option in another one

I have multiple select, and user can add more than select (make clone).
In every select includes option, and the same in all select,
on click add button make clone select div.
<select>
<option value="en">English</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
and more,...
I need to make that, when i select English from select one, Disabling the rest.
var stdCountries = $("#countriesContainer").children(".countries").first().clone('.add');
$(document).on('click', '.add',function() {
append_countries();
});
function append_countries() {
var objHtml = stdCountries.clone('.add');
$("#countriesContainer").append(objHtml);
$('.m_selectpicker').selectpicker();
}
/////////////////////////////////////////////////////////
$(".m_selectpicker").selectpicker();
$(document).on("click", ".remove", function(){
if($('#countriesContainer .countries').length > 1)
{
$(this).closest(".countries").remove();
}
else
{
generate('info', 'error');
}
});
$(document).on("change", ".m_selectpicker", function() {
$(this).parents('.countries').find('.lang').attr('name', 'name' + '[' + this.value + ']');
$(this).parents('.countries').find('.lang').attr('value', this.value);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<form class="m-form m-form--fit m-form--label-align-right" id="m_form_1" method="post">
<div class="m-portlet__body">
<div id="countriesContainer">
<div class="form-group m-form__group row countries">
<label class="col-form-label col-lg-2">Language</label>
<div class="col-2">
<select class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
<option value="en">Englsih</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
</div>
<div class="col-lg-6">
<input type='text' class="form-control m-input lang" name="name[]" value=""/>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom add">
add
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom remove">
remove
</a>
</div>
</div>
</div>
</div>
</form>
if you any idea please to help me,
Thanks you
Regards.

<select id="selectOne" class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
<option value="en">Englsih</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
Js
$(document).on("change", "#selectOne", function(){
if($('#selectOne').val() == 'en'){
$('select:not("#selectOne")').attr('disabled', true);​​​
}else{
$('select:not("#selectOne")').attr('disabled', false);​​​
}
});

jQuery clone form with empty input

There is a form that I wanted to clone this form every time the ADD button clicked. in this case form appended with previous values for inputs. I want each form work separately. Is there a way to append with empty values for inputs?
Here is my snippet :
$(document).ready(function() {
$(".Add").click(function() {
$(".formi").eq(0).clone().show().insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>

Yes, just clear them in the cloned copy (see *** line):
$(document).ready(function() {
$(".Add").click(function() {
$(".formi")
.eq(0)
.clone()
.find("input").val("").end() // ***
.show()
.insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
That specific example uses find to find the input, val to clear its value, and then end to return to the original set of cloned elements so that show and insertAfter are run on that set (instead of the input(s)).

You should first clone the form and then reset the element values as follows. In your case input.
$(document).ready(function() {
$(".Add").click(function() {
var form = $(".formi").eq(0).clone();
form.find("input[type=text]").val("");
form.show().insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>

You could select the last form after the clone then empty the value of the child inputs like :
$(".formi:last input").val('');
$(document).ready(function() {
$(".Add").click(function() {
$(".formi").eq(0).clone().show().insertAfter(".formi:last");
$(".formi:last input").val('');
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>

I refactored some of your stuff because I had to do it differently in order to make it work the way i wanted it to, but here it is.
Here is the JSFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"> </script>
<span class="Add">Add+</span>
<div class="all">
<div class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button class="add">ok</button>
<span class="cancel">Cancel</span>
</div>
</div>
function addClickListener(){
arr = $(".add")
$(arr[arr.length - 1]).click(function(ev) {
var clone = ev.currentTarget.parentElement.cloneNode(true);
$('.all').append(clone);
addClickListener();
});
cancArr = $('.cancel');
$(cancArr[cancArr.length - 1])
.on('click', function() {
$(this).parent().remove();
});
}
addClickListener();

Bootstrap Multi-select - adding images after checkboxes

Firstly here's the fiddle
I'm trying to add image after the checkbox for Bootstrap multi-select plugin, after each check box or before it I'm trying to add a thumbnail, here's what I did till now:
Adding images directly in each option but this plugin removes all html in
Used jquery after() to add image after the field but it does not work.
HTML Code:
<div class="col-sm-12">
<div id="vm" class="tab-pane fade in active">
<div class="panel panel-primary">
<div class="panel-body">
<form action="/Lab/Rtx/etabs/edit/0451483t" id="ServerEditForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
</div>
<div class="col-md-8">
<div class="form-group">
<input type="hidden" name="data[Server][0][id]" class="form-control" value="1" id="Server0Id">
<div class="controls">
<label for="Server0Vm">hosta0451483t</label>
<input type="hidden" name="data[Server][0][Vm]" value="" id="Server0Vm_">
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup>
<option value="ctrlr0451483t">ctrlr0451483t</option>
<option value="ipr0451483t">ipr0451483t</option>
<option value="ldap0451483t">ldap0451483t</option>
<option value="proxy0451483t">proxy0451483t</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
jQuery Code:
$(document).ready(function() {
$('.multiselect').multiselect({
buttonWidth: 'auto',
numberDisplayed:15,
onChange: function(element, checked) {
//console.log(element.attr('value') + checked);
$("ul.multiselect-container").find("input[type=checkbox]").each(function(){
//console.log(element.attr('value'));
var valueAttr = $(this).attr('value');
if (element.attr('value') == valueAttr) {
var checkParent = $(this).parent().parent().parent().hasClass('active');
//console.log(checkParent);
if (checkParent == false) {
$(this).removeAttr('disabled')
}else{
$(this).attr('disabled','disabled')
}
}
});
}
});
});
Any help would be appreciated.

You can use optionLabel option
optionLabel A callback used to define the labels of the options
$('.multiselect').multiselect({
enableHTML: true,
optionLabel: function(element) {
return '<img src="'+$(element).attr('data-img')+'"> '+$(element).text();
},
// ...
});
HTML:
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup>
<option data-img="1.png" value="ctrlr0451483t">ctrlr0451483t</option>
<option data-img="2.png" value="ipr0451483t">ipr0451483t</option>
<option data-img="3.png" value="ldap0451483t">ldap0451483t</option>
<option data-img="4.png" value="proxy0451483t">proxy0451483t</option>
</optgroup>
</select>
JSFiddle

You can try this:
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true,
enableHTML: true,
optionLabel: function(element) {
return '<img src="https://placekitten.com/'+ $(element).attr('data-img')+'"> '+ $(element).text();
},
});
$('#btnget').click(function() {
alert($('#chkveg').val());
});
});
.multiselect-container>li>a>label {
padding: 4px 20px 3px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="http://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="http://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple>
<option value="cheese" data-img="100/109">AAA</option>
<option value="tomatoes" data-img="100/108">BBB</option>
<option value="mozarella" data-img="100/107">CCC</option>
<option value="mushrooms" data-img="100/106">DDD</option>
<option value="pepperoni" data-img="100/105">EEE</option>
<option value="onions" data-img="100/110">FFF</option>
</select>
<br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
</div>
</form>

How to show an entire div on select

I need some help displaying a div with a form inside of it whenever someone selects a certain option from a tag. My code is this:
<script type="text/javascript">
$(function() {
$('#contactOptionSelect').change(function() {
$('.emailForm').hide();
$('#' + $(this).val()).show();
});
});
</script>
<div class="contactSelect" id="contactOptionSelect">
<label for="selectContact">Contact us: </label>
<select name="selectContact" class="selectContactType" style="width: 150px;"/>
<option class="opt" value="">Please select</option>
<option class="opt" id="helpOpt" value="">Help and Support</option>
<option class="opt" id="emailOpt" value="">Email</option>
<option class="opt" id="visitOpt" value="">Visit us!</option>
<option class="opt" id="phoneOpt" value="">Phone</option>
</select>
</div>
<div class="emailForm" id="emailFormId">
<form id="contactUsForm" method="post" action="">
<div class="formSubject">
<label for="inputSubject">Subject</label>
<input type="text" width="50px" id="inputSubject" />
</div>
<div class="formBody">
<label for="inputBody">Email</label>
<textarea rows="15" cols="50" id="inputBody"></textarea>
</div>
<div class="formSubmit">
<input type="submit" id="inputSubmit" value="Send!"/>
</div>
</form>
</div>
And I want to display the last form when the email option is selected. I kinda want it to work like this: http://www.apple.com/privacy/contact/ High standards I know but whatever haha Thanks in advance for any help!

Are you looking for something like this? http://jsbin.com/okakuy/edit#javascript,html
Whenever the select option is changed, we hide whichever div is visible, and show whichever div has the current select value as its id attribute.
$("#parts").on("change", function(o){
$(".panels")
.find("> div:visible")
.slideUp()
.end()
.find("#" + o.target.value)
.slideDown();
});
Coupled with this markup:
<select id="parts">
<option>foo1</option>
<option>foo2</option>
<option>foo3</option>
</select>
<div class="panels">
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>
</div>