remove selected value from select box using jquery but It's need to display current selected value in select box?

Question

I have a select box and add more button . when I click add more button it's creating another select using clone.In first select box I select one option value from select box means that value should be removed from next created select box.At the same time which selected value in select box that current value shown on current select box. Select box value is being loaded dynamically.

Eg:

<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

Is it what you're looking for ?

I would recommend you to play and manipulate with index() , that won't bother your dynamic values.

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

You can try like this.

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

I hope this will help you, if you need anything please ask!

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