How to pass and remove a selected options value

Question

I'm trying to have the selected options value pass when I click the Add Another Worker button and have the pre selected="selected" option removed and placed on the new selected option.

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 a link to my jsfiddle https://jsfiddle.net/jxqyn4rg/

Answer 1

If I understand you correctly, you're trying to append new select to your div on click of a button. If so, A simple way would be restructure your html to have .add-more div before your actual (or initial select box).

<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 the 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 dont want to change your HTML or CSS as you said in your comments you could modify your jQuery logic to following to achieve what you're after:

$(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 would work fine if you replace:

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