0

我有这个选择；选择国家并添加到一个新的选择多个国家，限制为 5 个国家，但如果我进行多项选择，我只想通过选择的国家或更多国家添加 1 个国家。我的错误是在我的函数 addC() 中，当我想在我的选择中添加多个国家时，它会在 1 个选项标签中添加多个国家，如下所示：

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

2 回答 2

1

使用each函数遍历文本并附加它..试试这个

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

JSbin在这里

于 2013-02-09T19:46:39.593 回答
1

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

function addC() {
  if ($('#countries option:selected').size() < 5)
  {
    $('#addCountry').append($('#countries option:selected').clone());
  }
  else
  {
    alert('you can only select 5');
  }
}
于 2013-02-09T19:56:56.110 回答