Seçilen bir seçenek değeri nasıl iletilir ve kaldırılır

Question

Başka bir İşçi Ekle düğmesini tıklattığımda ve selected="selected" seçeneğinin kaldırılıp yeni seçilen seçeneğe yerleştirildiğinde seçili seçenek değerinin geçişini yapmaya çalışıyorum.

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

İşte

<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> 

, sen üzerinde div yeni select eklemek için ben doğru anlamak benim jsfiddle https://jsfiddle.net/jxqyn4rg/

Answer 1

bir bağlantı çalışıyoruz HTML bir düğmeye tıklayın. Öyleyse, basit bir yol, gerçek (veya ilk seçim kutusu) önce html'nizi .add-morediv olarak yeniden yapılandırır.

<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> 

Ve js artık şöyle append şey prepend kullanın:

$(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'); 
    }); 
}); 

Çalışma keman: https://jsfiddle.net/nje3opu7/

EDIT'e sizin gibi HTML veya CSS değiştirmek istemiyorsanız Yorumlarınızda, jQuery mantığınızı, takip ettiklerinize ulaşmak için aşağıdakilere uygulayabilirsiniz:

$(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'); 
    }); 
}); 

Çalışma keman: https://jsfiddle.net/97tnnyj0/

Edit2: Eğer değiştirirseniz bile @KAD Kod iyi çalışacak:

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

Answer 2

jqueryselect.val($('.title:first').val()); ile Sen html doğrudan bir jquery nesne oluşturabilir select dizesi ve değerini son .title değeri ile ayarlayın:

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

Answer 3

Bu

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> 

Komut

$('.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'); 
    }); 
}); 

Çalışma Bağlantı Yargılayabileceğini

Code Pen Link