CODEWITHSUNDEEP
javascriptjqueryhtml
Kakitori
Kakitori

Reputation: 913

Add data into a Select

I have this select; to select countries and add to a new select multiple with a limit of 5 countries, but I just want to add 1 country by select or more countries if i do a multiple select. My mistake is in my function addC(), when I want to add more than 1 country in my select, it add the several countries in 1 option tag like this:

<option>South KoreaUSAJapan</option>

What I can modify to display the following way if i do a multiple select?:

<option>South Korea</option>
<option>USA</option>
<option>Japan</option>

My code:http://jsbin.com/osesem/4/edit

function addC() {
    if ($("#agregarProvincia option").length < 5) {
        var newC = ($("#countries option:selected").text());
        $("#addCountry").append("<option>" + newC + "</option>");
    }
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<label for="provincia2"><b>¿Country?</b></label><br>
<span>
    <select multiple="multiple" size="5" id="countries">
        <option value="1">South Korea</option>
        <option value="2">USA</option>
        <option value="2">Japan</option>
        <option value="3">Italy</option>
        <option value="4">Spain</option>
        <option value="5">Mexico</option>
        <option value="6">England</option>
        <option value="7">Phillipins</option>
        <option value="8">Portugal</option>
        <option value="9">France</option>
        <option value="10">Germany</option>
        <option value="11">Hong Kong</option>
        <option value="12">New Zeland</option>
        <option value="13">Ireland</option>
        <option value="14">Panama</option>
        <option value="15">Norwey</option>
        <option value="16">Sweeden</option>
        <option value="17">India</option>
        <option value="18">Morroco</option>
        <option value="19">Russia</option>
        <option value="20">China</option>
    </select>
</span>
<div class="addremover">
    <input class="add" type="button" onclick="addC()" value="Addd »" />
    <br/>
</div>
<span>
    <select id="addCountry" multiple="multiple" size="5">
    </select>
</span>

Upvotes: 0

Views: 588

Answers (2)

daleyjem
daleyjem

Reputation: 2674

Or just clone the selected <option>'s

function addC() {
  if ($('#countries option:selected').size() < 5)
  {
    $('#addCountry').append($('#countries option:selected').clone());
  }
  else
  {
    alert('you can only select 5');
  }
}

Upvotes: 1

bipen
bipen

Reputation: 36531

use each function to loop through the text and append it.. try this

function addC() {
    if ($("#agregarProvincia option").length < 5) {
        var newC = ($("#countries option:selected"));
      newC.each(function(){
        $("#addCountry").append("<option>" + $(this).text() + "</option>");
      })
    }
}

JSbin here

Upvotes: 1

Related Questions