jqueryを使用して選択ボックスから選択した値を削除しますが、現在選択されている値を選択ボックスに表示する必要がありますか？

Question

私はselectボックスを持っており、さらにbuttonを追加しています。私はそれがclone.Inを使用して別のselectを作成していますbutton以上の追加]をクリックしたときに最初のボックスを選択し、私はselectボックスからselect 1つのoption値は、現在のvalue選択ボックスで値を選択していると同時にbox.At selectを作成した値は、次から取り除かなければならないことを意味します現在のselectボックスに表示されます。選択ボックスの値が動的にロードされています。

例：

<select name="section" id="section_1" class="sectionType"> 
    <option value=" ">------</option> 
    <option value="05">test1</option> 
    <option value="06">test2</option> 
    <option value="07">test3</option> 
    <option value="08">test4</option> 
    <option value="10">test5</option> 
    <option value="11">test6</option> 
    <option value="12">test7</option> 
    <option value="13">test8</option> 
    <option value="14">test9</option> 
</select> 

Answer 1

それはあなたが探しているものですか？

index()で再生して操作することをお勧めします。動的値には問題ありません。

//Take a clone of last 
var cloneElement = $('.sectionType:last').clone(); 
//Get index of option selected from last 
var indexToRemove = $('.sectionType:last').find('option:selected').index(); 
//Remove previously selected index 
cloneElement.find('option').eq(indexToRemove).remove(); 
//Change the id of an element 
cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1)); 
//If element has options 
if(cloneElement.find('option').length) 
{ 
    //Finally append it 
    $('body').append("<br/><br/>").append(cloneElement); 
} 

$('button').click(function(){ 
 
    
 
    //Take a clone of last 
 
    var cloneElement = $('.sectionType:last').clone(); 
 
    //Get index of option selected from last 
 
    var indexToRemove = $('.sectionType:last').find('option:selected').index(); 
 
    //Remove previously selected index 
 
    cloneElement.find('option').eq(indexToRemove).remove(); 
 
    //Change the id of an element 
 
    cloneElement.attr("id", "section_"+parseInt($('.sectionType').length+1)); 
 
    //If element has options 
 
    if(cloneElement.find('option').length) 
 
    { 
 
    //Finally append it 
 
    $('body').append("<br/><br/>").append(cloneElement); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="section" id="section_1" class="sectionType"> 
 
    <option value="">------</option> 
 
    <option value="05">test1</option> 
 
    <option value="06">test2</option> 
 
    <option value="07">test3</option> 
 
    <option value="08">test4</option> 
 
    <option value="10">test5</option> 
 
    <option value="11">test6</option> 
 
    <option value="12">test7</option> 
 
    <option value="13">test8</option> 
 
    <option value="14">test9</option> 
 
</select> 
 
<button>Clone</button>

Answer 2

あなたはこのように試すことができます。

$("#yourId").val(" ")//if your value has white spec else use like below line 
$("#YourId").val("")//What ever you want to be selected, place your value in .val() 

Answer 3

私はこれがあなたを助けてくれることを願っています。

$("button").on("click", function() { 
 
    $("#section_1") 
 
    .clone() 
 
    .attr("id", "section_2") 
 
    .on("change", function() { 
 
    var sec2Val = $(this).val(); 
 
    var delOption = $("#section_1 > option[value=" + sec2Val + "]").detach(); 
 
    optionHolder.push(delOption); 
 
}) 
 
    .insertAfter($("#section_1")); 
 
    $(this).attr("disabled", "disabled"); 
 
}); 
 

 
var optionHolder = []; 
 
$("#section_1").on("change", function() { 
 
    var sec1Val = $(this).val(); 
 
    if ($("#section_2")) { 
 
    var delOption = $("#section_2 > option[value=" + sec1Val + "]").detach(); 
 
    optionHolder.push(delOption); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="section" id="section_1" class="sectionType"> 
 
    <option value=" ">------</option> 
 
    <option value="05">test1</option> 
 
    <option value="06">test2</option> 
 
    <option value="07">test3</option> 
 
    <option value="08">test4</option> 
 
    <option value="10">test5</option> 
 
    <option value="11">test6</option> 
 
    <option value="12">test7</option> 
 
    <option value="13">test8</option> 
 
    <option value="14">test9</option> 
 
</select> 
 
<button>Add more</button>