Develop Reference

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);​​​
}
});

How do I get the checkbox state toggle between the two select boxes?

I have two select boxes which loads contacts and groups of contacts, how do I show one div at a time, switching between them by checking or unchecking the checkbox?
The code below show one at off state and show both two when checked instead of hiding the first one and showing the second one.
code snippet
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#dependent-box');
var dependent2 = $('#dependent-box2');
if (checkbox.attr('checked') !== undefined){
dependent.show();
dependent2.hide();
} else {
dependent2.show();
dependent.hide();
}
checkbox.change(function(e){
dependent.toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
<div id="dependent-box">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hi
</option>
</select>
</div>
</div>
<div id="dependent-box2">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hello
</option>
</select>
</div>
</div>

You are not toggling the second box in your change function.
checkbox.change(function(e){
dependent.toggle();
dependent2.toggle();
});

check if the checker is checked :
$(document).ready(function () {
var checkbox = $('#checker');
var dependent = $('#dependent-box');
var dependent2 = $('#dependent-box2');
dependent2.hide();
checkbox.change(function(e){
if(this.checked){
dependent.hide();
dependent2.show();
}else
{
dependent.show();
dependent2.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checker" data-toggle="toggle">
<div id="dependent-box">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hi
</option>
</select>
</div>
</div>
<div id="dependent-box2">
<div class="form-group" >
<select class="contact-multiple form-control" multiple="multiple" name="to_sms[]" id="toggle1" style="width: 98%;">
<option value="Hi">
Hello
</option>
</select>
</div>
</div>

How to deselect all selected values from bootstrap-multiselect with reset button?

I am having issues when trying to select the element which contains all the selected values.
For example: if you select by id such as
$('#campaign-select').multiselect('refresh'),
it is not doing anything. Why is that?
Please see jsFiddle
FIXED IT!
$('#filter-reset-btn').on('click', function () {
$('#campaigns-select').multiselect('rebuild');
/* resetting the select element to refresh*/
$('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select option:selected').each(function () {
$(this).prop('selected', false);
})
$('#campaigns-select,#sites-select,#mdmadservers-select,#ratetypes-select').val([]).multiselect('refresh')
});
Here is updated to jsFiddle

You need to set the value to an empty array before refreshing the multi select. Also, note that you are missing an "s" in "campaign" inside you selector.
Use this: $('#campaigns-select').val([]).multiselect('refresh')

According to the documentation you can use:
.multiselect('deselectAll', justVisible): Deselects all options. If justVisible is set to true or not provided, all visible options are deselected, otherweise (justVisible set to false) all options are deselected.
After calling the previous method you need to updateButtonText:
.multiselect('updateButtonText'): When manually selecting/deselecting options and the corresponding checkboxes, this function updates the text and title of the button.
Hence you can write:
$('#campaigns-select').multiselect('deselectAll', false);
$('#campaigns-select').multiselect('updateButtonText');
var msOptions = {
includeSelectAllOption: true,
enableFiltering: true,
selectAllJustVisible: false,
buttonWidth: '80%',
buttonText: function (options, select) {
return options.length + ' selected';
}
};
$('#campaigns-select').multiselect(msOptions);
$('#sites-select').multiselect(msOptions);
$('#mdmadservers-select').multiselect(msOptions);
$('#ratetypes-select').multiselect(msOptions);
$('#filter-reset-btn').on('click', function () {
$('#campaigns-select').multiselect('deselectAll', false);
$('#campaigns-select').multiselect('updateButtonText');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<div id="wrapper">
<!--SideBar-->
<div id="sidebar-wrapper">
<div class="sidebar-header" style="text-align:center;">Filters</div>
<div id="sidebar-filter panel panel-default">
<div class="form-group">
<div class="text-caption" style="margin-top:20px;">Date Range</div>
<div style="width: 80%;margin-left: 30px">
<input type='text' name="daterange" class="form-control" value=""/>
</div>
</div>
<div class="form-group">
<div class="text-caption">Campaign</div>
<select class="form-control campaigns-select-class" id="campaigns-select" multiple="multiple">
<option value="2929">TestCampaign1</option>
<option value="2930">TestCampaign2</option>
<option value="2931">TestCampaign3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Site</div>
<select class="form-control sites-select" id="sites-select" multiple>
<option value="1010">TestSite1</option>
<option value="1011">TestSite2</option>
<option value="1012">TestSite3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Server</div>
<select class="form-control mdmadservers-select" id="mdmadservers-select" multiple>
<option value="1"> TestServer1</option>
<option value="2"> TestServer2</option>
<option value="3"> TestServer3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">Rate Type</div>
<select class="form-control ratetypes-select" id="ratetypes-select" multiple>
<option value="Test1">Test1</option>
<option value="Test2">Test2</option>
<option value="Test3">Test3</option>
</select>
</div>
<div class="form-group">
<div class="text-caption">
<input type="checkbox" class="hide-completed-entries" id="hide-completed-entries" checked="checked">
Hide Completed
</div>
</div>
<button type="button" class="btn btn-success btn-block" id="filter-btn">Apply</button>
<button type="button" class="btn btn-primary btn-block resetfilters" id="filter-reset-btn">Reset</button>
</div>
</div>
</div>

try it!
$('#campaign-select').multiselect({
buttonWidth: 330,
includeSelectAllOption: true,
allSelectedText: 'Clean all',
onSelectAll: function (options) {
$("#campaign-select").multiselect("clearSelection");
}
});
Or adding Reset button
$('#campaigns-select').multiselect({
buttonWidth: 330,
enableResetButton: true,
resetText: "Clean"
});
Print 01
Print 02

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();

Hide/show the same div

I am trying to hide various div elements, but I want to make it dynamic so if I unselect then it shows back up in the browser. This is easy enough with show/hide, but my problem is that I need to show/hide some of the same fields. It works on the first selection, but then the second run it won't do anything because it thinks it should show it as per the '.show()' in the first run.
Can anyone point me in the right direction?
Thanks
S.
<script>
$(document).ready(function(){
$('#nat').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
<script>
$(document).ready(function(){
$('#nat2').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
HTML like this:
<div class="form-row">
<label>
<span>Test1</span>
<select name="field1" id="nat">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Test2</span>
<select name="field2" id="nat2">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row" id='field25'>
<label>
<span>Test3</span>
<input name="field25" type="text">
</input>
</label>
</div>
<div class="form-row" id='field26'>
<label>
<span>Test4</span>
<input name="field26" type="text">
</input>
</label>
</div>

You don't need to define $(document).ready twice. Try this:
<script>
$(document).ready(function(){
$('#nat').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
$('#nat2').on('change', function() {
if ( this.value == 'no_nat')
{
$("#field25").hide();
$("#field26").hide();
}
else
{
$("#field25").show();
$("#field26").show();
}
});
});
</script>
See fiddle https://jsfiddle.net/r2m9s8gx/

You can try to have a single handler like
$(document).ready(function() {
$('select[name="field1"], select[name="field2"]').on('change', function() {
var state = $('select[name="field1"]').val() == 'no_nat' || $('select[name="field2"]').val() == 'no_nat';
$("#field25, #field26").toggle(state);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
<label>
<span>Test1</span>
<select name="field1">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Test2</span>
<select name="field2" type="text">
<option value="" selected="selected"></option>
<option VALUE="no_nat">1</option>
<option VALUE="nat">2</option>
</select>
</label>
</div>
<div class="form-row" id='field25'>
<label>
<span>Test3</span>
<input name="field25" type="text" />
</label>
</div>
<div class="form-row" id='field26'>
<label>
<span>Test4</span>
<input name="field26" type="text" />
</label>
</div>

try
$(this).val() === 'no_nat'
or
$('#nat').val() === 'no_nat'