Geek Answers Handbook

How to transfer and delete the selected parameter value

I try to pass the value of the selected options when I click the "Add another worker" button and removes the pre selected="selected" parameter and put it in the new selected parameter.

JQuery

 $(document).ready(function(){ $('.worker').on('click', function(e){ e.preventDefault(); e.stopPropagation(); var title = $('.title').val(); var worker = '<select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>'; $('.add-more').append(worker); $('.title:first').val('Select a Title'); }); });

HTML

 <ul> <li> <div class="worker-container-last"> <label class="worker-label"> <select name="title[]" class="title"> <option value="Select a Title" selected="selected">Select a Title</option> <option value="Boss">Boss</option> <option value="Worker">Worker</option> <option value="Manager">Manager</option> </select> </label> </div> <div class="add-more"></div> <div><a class="worker" title="" href="">Add Another Worker</a></div> </li> </ul>

Here is the link to my jsfiddle https://jsfiddle.net/jxqyn4rg/

+5
source share
3 answers

If you understand correctly, you are trying to add a new select to your div at the click of a button. If so, an easy way would be to restructure your html to have a .add-more div before your actual (or initial selection window).

 <ul> <li> <div class="add-more"></div> <div class="worker-container-last"> <label class="worker-label"> <select name="title[]" class="title"> <option value="Select a Title" selected="selected">Select a Title</option> <option value="Boss">Boss</option> <option value="Worker">Worker</option> <option value="Manager">Manager</option> </select> </label> </div> <div><a class="worker" title="" href="">Add Another Worker</a></div> </li> </ul>

And in your js use prepend instead of append something like:

 $(document).ready(function(){ $('.worker').on('click', function(e){ e.preventDefault(); e.stopPropagation(); var title = $('.title').val(); var worker = '<li><select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select></li>'; $('.add-more').prepend(worker); //$('.title:first').val('Select a Title'); }); });

Working fiddle: https://jsfiddle.net/nje3opu7/

EDIT , if you do not want to change HTML or CSS , as you said in your comments, you can change the jQuery logic as follows:

 $(document).ready(function(){ $('.worker').on('click', function(e){ e.preventDefault(); e.stopPropagation(); var getValue = $('.title:first').val() var worker = '<select name="title[]" class=" newSelect title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>'; $('.add-more').append(worker); $('.title:eq('+$('.newSelect').length+')').val(getValue); $('.title:first').val('Select a Title'); }); });

Working fiddle: https://jsfiddle.net/97tnnyj0/

Edit2: Even @KAD code will work fine if you replace:

jqueryselect.val($('.title:last').val()); with jqueryselect.val($('.title:first').val());

+2
source

You can create a jquery object directly from the html select line and set its value with the value of the last .title select:

 $(document).ready(function(){ $('.worker').on('click', function(e){ e.preventDefault(); e.stopPropagation(); var title = $('.title').val(); var worker = '<select name="title[]" class="title"><option value="Select a Title" selected="selected">Select a Title</option><option value="Boss">Boss</option><option value="Worker">Worker</option><option value="Manager">Manager</option></select>'; // create the jquery object and set the value var jqueryselect = $(worker); jqueryselect.val($('.title:first').val()); // this can be combined to one line also // $(worker).val($('.title:first').val()); $('.add-more').append(jqueryselect); $('.title:first').val('Select a Title'); }); });

https://jsfiddle.net/jxqyn4rg/9/

+1
source

You can try this

HTML

 <ul> <li> <div class="worker-container-last"> <label class="worker-label"> <select name="title[]" class="title" id="select1"> <option value="Select a Title" selected="selected">Select a Title</option> <option value="Boss">Boss</option> <option value="Worker">Worker</option> <option value="Manager">Manager</option> </select> </label> </div> <div class="add-more"></div> <div><a class="worker" title="" href="">Add Another Worker</a></div> </li> </ul>

Script

 $('.worker').on('click', function(e){ e.preventDefault(); e.stopPropagation(); debugger; var title = $('.title').val(); var selected = $('#select1').val(); var worker = '<select name="title[]" class="title" >'; worker +='<option value="Select a Title">Select a Title</option>'; if(selected=="Boss"){ worker+='<option value="Boss" selected="selected">Boss</option>' ; worker+='<option value="Worker">Worker</option>' ; worker+='<option value="Manager">Manager</option>' ; } else if (selected=="Worker"){ worker+='<option value="Boss" >Boss</option>'; worker+='<option value="Worker" selected="selected">Worker</option>' ; worker+='<option value="Manager">Manager</option>' ; } else if (selected=="Manager"){ worker+='<option value="Boss" >Boss</option>'; worker+='<option value="Worker">Worker</option>'; worker+='<option value="Manager" selected="selected">Manager</option>' ; } else{ worker+='<option value="Boss">Boss</option>' ; worker+='<option value="Worker">Worker</option>' ; worker+='<option value="Manager">Manager</option>' ; } $('.add-more').append(worker); $('.title:first').val('Select a Title'); }); });

Working link

Pen Link Code

+1
source

More articles:


All Articles