Develop Reference

How to show multiple select options when user select multiple options and when unselect it still hide and reset!!!?? jquery

I have select options contains languages, it's supposedly that user choose multiple options (languages) or an option (language), and i want user when choose an option (language), new select option shows, and contains his level in that language.
when user select multiple languages (english, arabic, france), three select option show, his level in these language, and when unselect any options, it's supposed to, the select option (that contains his level in that language) become hidden and reset (return to default select (first option)).
but i've some problems in my code
1- when user select multiple options, multiple select options that contains his level don't show all at once.
2- when user unselect an option it stills show and not reset (return to default select (first option))?!!
could you help me please
my view blade with script:
#extends('layouts.app')
#section('content')
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
<option value="4">Espanole</option>
</select>
</div>
</div>
<div id="arabicShow" style="display: none" class="form-row">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" style="display: none" class="form-row">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value='' >a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>
#stop
#section('script')
<script type="text/javascript">
$(document).ready(function (){
$( "#languages option:first-child" ).attr("disabled","disabled");
$( "#arabic option:first-child" ).attr("disabled","disabled");
$( "#english option:first-child" ).attr("disabled","disabled");
$( "#france option:first-child" ).attr("disabled","disabled");
$('#languages').change(function(){
var text = $(this).find("option:selected").text().trim(); //get text
if(text === "Arabic"){
$('#arabicShow').show();
}else if(text === "English"){
$('#englishShow').show();
}else if(text === "France"){
$('#franceShow').show();
}else {
$('#arabicShow').hide();
$('#englishShow').hide();//hide
}
});
});
</script>
#stop

You can use .each loop to iterate through all selected options and then depending on condition show require select-boxes.
Demo Code :
$(document).ready(function() {
$("#languages option:first-child").attr("disabled", "disabled");
$("#arabic option:first-child").attr("disabled", "disabled");
$("#english option:first-child").attr("disabled", "disabled");
$("#france option:first-child").attr("disabled", "disabled");
$('.selects').hide(); //hide all
$('#languages').change(function() {
$('.selects select:not(:visible)').val(""); //reset
$('.selects').hide(); //hide all
//loop through all selected options..
$(this).find("option:selected").each(function() {
var text = $(this).text()
if (text === "Arabic") {
$('#arabicShow').show();
} else if (text === "English") {
$('#englishShow').show();
} else if (text === "France") {
$('#franceShow').show();
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="languages">Languages</label>
<select id="languages" class="form-control" multiple>
<option>Choose Language...</option>
<option value="1">English</option>
<option value="2">Arabic</option>
<option value="3">France</option>
</select>
</div>
</div>
<!--added one common class i.e : selects-->
<div id="arabicShow" class="form-row selects">
<div id="" class="form-group col-md-6">
<label for="arabic">Arabic level</label>
<select id="arabic" class="form-control">
<option value='' selected>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="englishShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="english">English level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<div id="franceShow" class="form-row selects">
<div class="form-group col-md-6">
<label for="france">France level</label>
<select class="form-control">
<option value=''>Choose Your level...</option>
<option value=''>a</option>
<option value=''>b</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
</form>

Display value from selected option on every click

I have a dropdown menu where list is selected from mysql database and a textbox contain datepicker. How can i display value selected from the dropdown menu and datepicker on every click on add button? The code can add div dynamically onclick on add button but the value selected to be displayed in the div are changed on every selected dropdown menu because of the javascript onchange function.
How can i display the value correctly?
$( ".js-datepicker" ).datepicker();
$("#choose_exam").on("change", function() {
var selected = $(this).val();
$("#exam").html("" + selected);
});
$("#t_exam").on("change", function() {
var selected = $(this).val();
$("#exam_date").html("" + selected);
})
//contents of the div added after clicking on add button in the form
$(".add-more").click(function() {
var html = $("#copy-fields").html();
$("#validation-step2").append(html);
$('.js-datepicker').datepicker('update');
});
//remove button
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- This is the form contain dropdown menu and datepicker textbox -->
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<!--<?php
$sql = "Select name from exam_list order by id asc";
$result = mysql_query( $sql );
while(list($category) = mysql_fetch_row($result)){
$option = '<option value="'.$category.'">'.$category.'</option>';
echo ($option);}
?>-->
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam" id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields">
<div class="control-group">
<div class="form-group">
<div id="exam" name="exam[]"></div>
<div id="exam_date" name="exam_date[]"></div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
</div>

Your code has several problems:
The HTML you're copying using var html = $("#copy-fields").html(); contains elements with the id attribute specified, which will lead you to having a bunch of elements with the same id. Turn #exam to .exam and #exam_date to .exam_date to fix that.
Then, inside the change event, use first() or last(), so that only the first or the last of .exam and .exam_date change when the event is triggered. In the first snippet, I use last() as in $(".exam").last().html(this.value);.
The line $(".js-datepicker").datepicker("update"); throws an error, perhaps because you haven't set which date to update to. In the snippets below, I assume you want to reset it.
Snippet 1:
(This snippet follows your code as much as possible including a live update of the data 'onchange'.)
/* ----- JavaScript ----- */
/* Initialise the datepicker. */
$(".js-datepicker").datepicker();
/* Set the 'change' event. */
$("#choose_exam").on("change", function() {
$(".exam").last().html(this.value);
});
$("#t_exam").on("change", function() {
$(".exam_date").last().html(this.value);
})
/* Insert the given data to the DOM. */
$(".add-more").click(function() {
/* Cache the innerHTML of the '#copy-fields'. */
var html = $("#copy-fields").html();
/* Insert it as last inside '#validation-step2'. */
$("#validation-step2").append(html);
/* Reset the 'select' element and the date picker. */
$("#choose_exam").val(0);
$(".js-datepicker").val("");
});
/* Remove the saved data when the remove button is clicked. */
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam"
id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date
value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields">
<div class="control-group">
<div class="form-group">
<div class="exam" name="exam[]"></div>
<div class="exam_date" name="exam_date[]"></div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
</div>
</div>
Snippet 2:
(This snippet presents an alternate approach using a template to add the data to the DOM.)
/* ----- JavaScript ----- */
/* Create a template. */
var template = `
<div class="control-group">
<div class="form-group">
<div class="exam" name="exam[]">[_EXAM_]</div>
<div class="exam_date" name="exam_date[]">[_DATE_]</div>
</div>
<div class="form-group">
<button class="btn btn-default remove pull-right" type="button">Delete</button>
</div>
</div>
`;
/* Initialise the datepicker. */
$(".js-datepicker").datepicker();
/* Insert the given data to the DOM. */
$(".add-more").click(function() {
/* Cache the data. */
var
exam = $("#choose_exam").val(),
date = $("#t_exam").val(),
editedTemplate = template.replace("[_EXAM_]", exam).replace("[_DATE_]", date);
/* Insert it as last inside '#validation-step2'. */
$("#validation-step2").append(editedTemplate);
/* Reset the 'select' element and the date picker. */
$("#choose_exam").val(0);
$(".js-datepicker").val("");
});
/* Remove the saved data when the remove button is clicked. */
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<!----- HTML ----->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam"
id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
</div>

So i prefer to discuss about your question under this answer, because i still feel something is wrong, it's not clear to me what you want to do exactly, but here is you can get #t_exam and #choose_exam value after click on add button. Also it dynamically add selected values to your html but with a little changes.
$(".js-datepicker").datepicker();
$(".add-more").click(function() {
var selectedExam = $('#choose_exam option:selected').val();
var selectedDate = $('#t_exam').val();
var html = '<div class="control-group">'+
'<div class="form-group">'+
'<div class="exam" name="exam[]">'+selectedExam+'</div>'+
'<div class="exam_date" name="exam_date[]">'+selectedDate+'</div></div>'+
'<div class="form-group">'+
'<button class="btn btn-default remove pull-right" type="button">Delete</button>'+
'</div></div>'
;
$("#copy-fields").append(html);
// $('.js-datepicker').datepicker('update');
});
//remove button
$("body").on("click", ".remove", function() {
$(this).parents(".control-group").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- This is the form contain dropdown menu and datepicker textbox -->
<div class="tab-pane push-30-t push-50" id="validation-step2">
<div class="form-group">
<select class="form-control" name="choose_exam[]" id="choose_exam">
<!--<?php
$sql = "Select name from exam_list order by id asc";
$result = mysql_query( $sql );
while(list($category) = mysql_fetch_row($result)){
$option = '<option value="'.$category.'">'.$category.'</option>';
echo ($option);}
?>-->
<option value="0">Please choose</option>
<option value="1">Sample Category 1</option>
<option value="2">Sample Category 2</option>
<option value="3">Sample Category 3</option>
<option value="4">Sample Category 4</option>
<option value="5">Sample Category 5</option>
</select>
<label for="choose_exam">Exam List</label>
</div>
<div class="form-group">
<input class="js-datepicker form-control" type="text" name="t_exam" id="t_exam" data-date-format="dd/mm/yyyy">
<label for="t_exam">Date</label>
</div>
<div class="form-group">
<button class="btn btn-default add-more pull-right" type="button">Add</button>
</div>
<!-- This is for dynamically add every div contains exam and date value upon clicking add button -->
<div class="copy-fields hide" id="copy-fields"></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

Execute javascript on new born DOM elements after select change

i have a problem on new elements created after select change event.
This is my HTML:
<div class="cont-filtri">
<div class="form-group uno">
<label>Marca <span class="mandatory">*</span>:</label>
<select name="brad" class="form-control" required>
<option value="">Scegli</option>
<option value="1">Yamaha</option>
</select>
</div>
<div class="form-group due hide">
<label>Modello <span class="mandatory">*</span>:</label>
<select name="model" class="form-control" required disabled>
<option value="">Scegli</option>
<option value="1">Super bella</option>
</select>
</div>
<div class="form-group tre hide">
<label>Anno :</label>
<select name="year" class="form-control" disabled>
<option value="">Scegli</option>
<option value="1">2017</option>
</select>
</div>
</div>
<button type="button" class="btn btn-default aggiungi-filtro"><i class="fa fa-plus" aria-hidden="true"></i> Aggiungi filtro</button>
And this is my javascript :
$(".aggiungi-filtro").click(function(){
$(this).before('<hr/><div class="cont-filtri"><div class="form-group uno"> <label>Marca <span class="mandatory">*</span>:</label> <select name="brad" class="form-control" required> <option value="">Scegli</option> <option value="1">Yamaha</option> </select> </div><div class="form-group due hide"> <label>Modello <span class="mandatory">*</span>:</label> <select name="model" class="form-control" required disabled> <option value="">Scegli</option> <option value="1">Super bella</option> </select> </div><div class="form-group tre hide"> <label>Anno :</label> <select name="year" class="form-control" disabled> <option value="">Scegli</option> <option value="1">2017</option> </select> </div></div>')
});
$(".uno select").on("change",function(){
$(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".due").removeClass("hide");
});
$(".due select").on("change",function(){
$(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});
Here is the css for hidden elements:
.hide{
display:none;
}
This is my fiddle:
CLICK HERE
I'm trying to have the same control on new born elements.
For instance, when i switch my first select option, another select shows-up and so on.
This works perfectly on my first html element, but it doesn't work on the new borns.
Can you please help me?
Thank you!

You also can use delegation like this too:
$(document).on("change", ".uno select", function(){
....
});

With your code, the event listener is registered only on the pre-existing select.
You can either register a new listener for the new select in the method that creates it or use a listener that is registered a the document level as already suggested in other comments.

You can use event delegation, attaching the listener to a parent element (via JQuery selector or the document itself):
$(document).on("click", ".aggiungi-filtro", function(){
$(this).before('<hr/><div class="cont-filtri"><div class="form-group uno"> <label>Marca <span class="mandatory">*</span>:</label> <select name="brad" class="form-control" required> <option value="">Scegli</option> <option value="1">Yamaha</option> </select> </div><div class="form-group due hide"> <label>Modello <span class="mandatory">*</span>:</label> <select name="model" class="form-control" required disabled> <option value="">Scegli</option> <option value="1">Super bella</option> </select> </div><div class="form-group tre hide"> <label>Anno :</label> <select name="year" class="form-control" disabled> <option value="">Scegli</option> <option value="1">2017</option> </select> </div></div>')
});
$(document).on("change", ".uno select", function(){
$(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".due").removeClass("hide");
});
$(document).on("change", ".due select", function(){
$(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});

In your case you can avoid the event delegation because you may act differently.
I suggest you to use clone(true): Create a deep copy of the set of matched elements preserving the event handlers.
In this way you will reduce your code.
$(".aggiungi-filtro").click(function () {
$(this).before('<hr/>')
.before($('.cont-filtri:first').clone(true)
.find('select.form-control').val('').end()
.find(".form-group:gt(0)").addClass("hide").end());
});
$(".uno select").on("change", function () {
$(this).closest(".cont-filtri").find(".due select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".due").removeClass("hide");
});
$(".due select").on("change", function () {
$(this).closest(".cont-filtri").find(".tre select").attr("disabled", false);
$(this).closest(".cont-filtri").find(".tre").removeClass("hide");
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont-filtri">
<div class="form-group uno">
<label>Marca <span class="mandatory">*</span>:</label>
<select name="brad" class="form-control" required>
<option value="">Scegli</option>
<option value="1">Yamaha</option>
</select>
</div>
<div class="form-group due hide">
<label>Modello <span class="mandatory">*</span>:</label>
<select name="model" class="form-control" required disabled>
<option value="">Scegli</option>
<option value="1">Super bella</option>
</select>
</div>
<div class="form-group tre hide">
<label>Anno :</label>
<select name="year" class="form-control" disabled>
<option value="">Scegli</option>
<option value="1">2017</option>
</select>
</div>
</div>
<button type="button" class="btn btn-default aggiungi-filtro"><i class="fa fa-plus" aria-hidden="true"></i> Aggiungi
filtro
</button>

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