如何傳遞和刪除選定的選項值

Question

當我單擊「添加其他工作人員」按鈕時，我試圖讓選定的選項值通過，並且已將selected="selected"選項刪除並置於新選定的選項上。

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> 

這裏是我的jsfiddle https://jsfiddle.net/jxqyn4rg/

Answer 1

如果我理解正確的鏈接，你想新select附加到div上點擊一個按鈕。如果是這樣，一個簡單的方法將重構您的HTML在您的實際（或初始選擇框）之前有.add-morediv。

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

而且在JS使用prepend代替append是這樣的：

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

工作小提琴：https://jsfiddle.net/nje3opu7/

編輯，如果你不想改變你的HTML或CSS你在你的評論中說，你可以修改你的jQuery邏輯，以實現你所追求的內容：

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

工作小提琴：https://jsfiddle.net/97tnnyj0/

EDIT2：如果更換即使@KAD代碼將正常工作：

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

Answer 2

您可以從HTML直接創建一個jQuery對象選擇的字符串並將其值設置爲最後的.title的值：

$(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/

Answer 3

你能試試這個

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> 

腳本

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

工作鏈接

Code Pen Link