Question

即时尝试在多个选项上获取多个选项并将其添加到正常选择中但是当我单击一个按钮添加时，例如，我选择两个选项并添加它们，它们会更改为正常选择中的一个选项

JavaScript代码

function addProf() {
    // get reference to select element
    var sel = document.getElementById('ProfAdd');
    var opt = document.createElement('option'); // create new option element
    // create text node to add to option element (opt)
    if ($(this).find('option[value="' + sel + '"]').length == 0) {
        opt.appendChild(document.createTextNode(document.getElementById('selProf').value));
        opt.value = 'option val'; // set value property of opt
        sel.appendChild(opt); // add opt to end of select box (sel)
        $("#selProf").find('option:selected').remove();
    }

}

function remProf() {
    // get reference to select element
    var sel = document.getElementById('selProf');
    var opt = document.createElement('option'); // create new option element
    // create text node to add to option element (opt)
    if ($(this).find('option[value="' + sel + '"]').length == 0) {
        opt.appendChild(document.createTextNode(document.getElementById('ProfAdd').value));
        opt.value = $("#ProfAdd :selected").text(); // set value property of opt
        opt.text = $("#ProfAdd :selected").text();
        sel.appendChild(opt); // add opt to end of select box (sel)
        $("#ProfAdd").find('option:selected').remove();
    }

}

HTML CODE

<div class="form-group">
    <label for="InputProf">Adicionar professores à turma</label>
    <select id="selProf" class="form-control" required>
        <option disabled selected>Professor</option>
        <option value="2">2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>
<input type="button" id="button6" class="myButton2" onclick="addProf()" value="Adicionar Professor">
</br>
<div class="form-group">
    <label for="InputTurma">Professores adicionados</label>
    <select multiple class="form-control" id="ProfAdd">
    </select>
</div>
<input type="button" id="button7" class="myButton2" onclick="remProf()" value="Retirar Professor">

Answer 1

如果您选择了两个选项，$('select :selected').text()将返回单个字符串连接的选定文本。 See fiddle

由于:selected正在返回多个元素，因此您需要循环遍历它们，并使用每个执行某些操作。一种方法是使用jQuery.each。

你需要为每个选定的一个创建一个新的option - 我已经移动了一点

$("#ProfAdd :selected").each(function (idx, selOpt) {
    var opt = document.createElement('option'); // create new option element
    opt.appendChild(document.createTextNode(document.getElementById('ProfAdd').value));
    opt.value = $(selOpt).text(); // set value property of opt
    opt.text = $(selOpt).text();
    sel.appendChild(opt); // add opt to end of select box (sel)
    $(selOpt).remove();
});

http://jsfiddle.net/daveSalomon/0b0obyra/5/

代码仍然不理想 - 您将document.getElementById（vanilla JS）与$('#id')（jQuery）混合在一起。选择一个并坚持下去。

这是一个更清洁的解决方案......

var $multiSel = $('#ProfAdd');
var $singleSel = $('#selProf');
$('#button6').click(function(){
    var $opts = $singleSel.find('option:selected');
    $multiSel.append($opts).val('');
});
$('#button7').click(function(){
    var $opts = $multiSel.find('option:selected');
    $singleSel.append($opts).val('');
});

http://jsfiddle.net/daveSalomon/0b0obyra/8/

获取多个选择选项并在正常选择中逐个添加它们

1 个答案: