Question

我有这个选择;选择国家并添加到一个新的选择倍数，限制为5个国家/地区，但我只想添加一个国家/地区，如果我进行多项选择，则选择一个或多个国家/地区。我的错误是在我的函数addC（）中，当我想在我的select中添加多个国家/地区时，它会在一个选项标记中添加几个国家/地区：

<option>South KoreaUSAJapan</option>

如果我进行多重选择，我可以修改以显示以下方式？：

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

我的代码：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>

Answer 1

使用each函数循环遍历文本并追加它试试这个

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

JSbin此处

Answer 2

或者只是克隆选定的<option>

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

将数据添加到Select中

2 个答案: