2016-09-28 13 views
0

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

例:

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

答えて

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>

+0

うまくいきます。しかし、選択ボックスで "06"の値を削除してはいけないとすれば、私は何ができるのかを考えれば、もう一つ条件を使うつもりです。すべての条件が成功するが、私はこの特定の条件も含める必要がある。 –

+0

いいえ、私たちができることは、選択されたインデックスの値が06かどうかを調べるのと同じ方法です。 –

+0

@PrakashG 'console.log(cloneElement.find( 'option') 'のような選択されたインデックスの値を得ることができます。eq(indexToRemove).val());' –

0

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

$("#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() 
+0

私は次の選択ボックス –

+0

から選択された値を削除することができますどのように同時にあなたはクローンを作成するときには、任意のjQueryの関数を呼び出していますか? – Bharat

+0

はい私はクローンを作成するためにクリック機能を使用しています –

0

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

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

関連する問題