Develop Reference

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>

Angular and Chosen Plugin

I used Chosen plugin in angular this is the snippet of the code
<select ng-model="vendor_value" ng-options="vendor.text for vendor in vendors" ui-jq="chosen" ui-options="{width: 300px}"></select>
then this will rendered in the browser
<select ng-model="category_value" ng-options="category.text for category in categories" style="border-color: red; display: none;" ui-jq="chosen" ui-options="{width: '300px', no_results_text: 'Press enter to add ', placeholder_text_single: '' }" class="ng-pristine ng-untouched ng-valid">
<option value="?" selected="selected" label=""></option>
<option value="0" label="Games">Games</option>
<option value="1" label="Baby">Baby</option>
<option value="2" label="Shoes">Shoes</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 300px;" title="">
<a class="chosen-single chosen-default" tabindex="-1"> <----- I want to insert a class after form is submitted in the angular controller
<span>Select an Option</span>
</a>
<div class="chosen-drop">
<div class="chosen-search">
<input type="text" autocomplete="off">
</div>
<ul class="chosen-results"></ul>
</div>
</div>
In this line
<a class="chosen-single chosen-default" tabindex="-1">
I want to insert a class after form is submitted. How can I insert class in a dynamically created html line by chosen plugin in angular controller?

Multiple Selectboxes focuses first select box

I've got three selectboxes in a fieldset.
Everything worked fine but after the new firefox update there's a problem.
When I click on the second or third selectbox it closes the dropdown and focuses the first selectbox. I have already disabled js and in the css there's only a border styling on focused element.
Any ideas?
<fieldset><div><label>Geburtsdatum:
<input type="hidden" value="" id="birthDate" name="lottery.birthDate">
<div class="clearfix"></div>
<select id="bDay" name="bDay">
</select>
<select id="bMonth" name="bMonth">
</select>
<select id="bYear" name="bYear">
</select>
<div class="clearfix"></div>
</label></div></fieldset>
I've deleted the optionlists.
Got any Idea?
This bug is only the latest firefox version.
Regards.

Move closing label tag after Geburtsdatum:
<fieldset><div><label>Geburtsdatum:</label>
^^
<input type="hidden" value="" id="birthDate" name="lottery.birthDate">
<div class="clearfix"></div>
<select id="bDay" name="bDay">
</select>
<select id="bMonth" name="bMonth">
</select>
<select id="bYear" name="bYear">
</select>
<div class="clearfix"></div>
</div></fieldset>

Trying to put list data into another list

In the program below I am using fee head id and trying to access dynamic data but when I select or click on any element of the first list it does not go to the next list.
After clicking on any element in first list, the element should disappear from first list and display in the second list. I am using a theme which has built-in classes in JS and JSP.
<div class="panel-body">
<div class="form-group">
<div class="col-lg-12">
<div class="leftBox">
<select id="feesHeads" multiple="multiple" class="multiple nostyle form-control" style="height:300px;">
<!-- <option value="1">Spain</option>
<option value="2">Germany</option>
<option value="3">Uruguay</option>
<option value="4" selected="selected">Brazil</option>
<option value="5" selected="selected">England</option>
<option value="6" selected="selected">Portugal</option>
<option value="7">Argentina</option>
<option value="8">Italy</option>
<option value="9">Croatia</option>
<option value="10">Denmark</option>
<option value="11">Russia</option>
<option value="12">Greece</option>
<option value="13">Chile</option>
<option value="14">Côte d'Ivoire</option>
<option value="15" selected="selected">France</option>
<option value="16">Sweden</option>
<option value="17">Switzerland</option>
<option value="18">Republic of Ireland</option>
<option value="19">Australia</option>
</select> -->
<br/>
<span id="box1Counter" class="count"></span>
<div class="dn"><select id="box1Storage" name="box1Storage" class="nostyle"></select></div>
</div>
<div class="dualBtn">
<button id="to2" type="button" class="btn" ><span class="icon12 minia-icon-arrow-right-3"></span></button>
<button id="allTo2" type="button" class="btn" ><span class="icon12 iconic-icon-last"></span></button>
<button id="to1" type="button" class="btn marginT5"><span class="icon12 minia-icon-arrow-left-3"></span></button>
<button id="allTo1" type="button"class="btn marginT5" ><span class="icon12 iconic-icon-first"></span></button>
</div>
<div class="rightBox">
<select id="box2View" multiple="multiple" class="multiple nostyle form-control" style="height:300px;"></select>
<br/>
<span id="box2Counter" class="count"></span>
<div class="dn"><select id="box2Storage" class="nostyle"></select></div>
</div>
</div>
</div><!-- End .form-group -->
</div>
</div><!-- End .panel -->
</div><!-- End .span6 -->
</div><!-- End .row -->

When you click on the firstList's option remove it from there and append it to the secondList. I've created a simple demo that might go with your scenario.
HTML :
First :
<select id="firstList">
<option>Mango</option>
<option>Banana</option>
<option>Apple</option>
</select>
<br />
Second
<select id="secondList"></select>
jQuery :
$("#firstList").on("change", function(){
var selectedItem = $(this).children("option:selected").val();
$(this).children("option:selected").remove();
$("#secondList").append($("<option> </option>").text(selectedItem));
});
jsFiddle
Note : It's just an overview of how you can implement it. But what you want is entirely upto you.

Populating form fields on change of drop down using javascript

I am trying to populate data in my fields depending on the value selected in the drop down box. I have passed the dropdown option select to the javascript function, but having problem in updating the form fields. Please check my code for the error I've committed.
This is my html code:
<div class="form-ui">
<span class="form-elements reqField">
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
<option value="1">Please Select</option>
<option value="2">Mrs.Jane Smith</option>
<option value="3">Mr.Junior Smith</option>
</select>
</span>
<span class="form-elements reqField">
<select id="itle1" class="dropdown">
<option value="1">Mr.</option>
<option value="2">Ms.</option>
<option value="3">Mrs.</option>
</select>
</span>
<span class="form-elements">
<input id="FirstName1" type="text" class="text" value="" />
</span>
<span class="form-elements reqField">
<input id="LastName1" type="text" class="text" value="" />
</span>
</div>
And the javascript code:
function populateData(value,person){
if(value==2){
$('#Title'+person).value=3;
$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";
}
if(value==3){
}
}

jQuery uses val() to get and set values.
So your js function should be
$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");
and not
$('#FirstName'+person).value="Jane";
$('#LastName'+person).value="Smith";
Also
<select class="dropdown" onchange="populateData(this.options[this.selectedIndex].value,1)">
should be
<select class="dropdown" onchange="populateData(this.value,1)">

quick answer is that I think you need to use val() not value - can't quite remember how it works with select though
http://api.jquery.com/val/

HTML ID error here <select id="itle1" class="dropdown">
Should be Title1 not itle1
Also I think the javascript should look like this
function populateData(value,person){
if(value==2){
$('#Title'+person+' option[value="3"]').attr('selected','selected');
$('#FirstName'+person).val("Jane");
$('#LastName'+person).val("Smith");
}
if(value==3){
}
}

You could use a FORM instead of a DIV, and the attribute name, instead of id.
They were designed a long time ago to manage forms.
You can use jQuery for that, but everything is already built-in in pure Javascript to handle forms.
<form class="form-ui">
<span class="form-elements reqField">
<select class="dropdown" onchange="populateData(this)">
<option value="1">Please Select</option>
<option value="2">Mrs.Jane Smith</option>
<option value="3">Mr.Junior Smith</option>
</select>
</span>
<span class="form-elements reqField">
<select name="title" class="dropdown">
<option value="1">Mr.</option>
<option value="2">Ms.</option>
<option value="3">Mrs.</option>
</select>
</span>
<span class="form-elements">
<input name="FirstName" type="text" class="text" value="" />
</span>
<span class="form-elements reqField">
<input name="LastName" type="text" class="text" value="" />
</span>
</form>
<script>
function populateData(sel){
var form = sel.form,
value = sel.options[sel.selectedIndex].value;
switch(value){
case '3':
form.FirstName.value = 'Junior';
form.LastName.value = 'Smith';
form.title.value = '1';
break;
case '2':
break;
default:
}
}
</script>