獲得多個選擇選項，並在正常選擇中分別逐一添加它們

即時通訊嘗試在多重選擇上獲得多個選項，並在正常選擇中添加它們，但是當我點擊一個按鈕添加時，例如，我選擇在兩個選項，並添加他們，他們改變對正常的一個選項，可以選擇獲得多個選擇選項，並在正常選擇中分別逐一添加它們

的jsfiddle EXAMPLE

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代碼

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

來源

2015-10-04 Dybbuk D.

歡迎SO！請參閱[問]與[mcve]代碼是不夠的理解和再現問題。如果可能的話，也添加一個jsfiddle/codepen演示 – Tushar

這個http://jsfiddle.net/0b0obyra/3/的作品（你忘了包括jquery，你必須在jsfiddle中以不同的方式綁定點擊）米不知道你的目標是什麼？它似乎工作得很好。 – jacksbox

在多重選擇時，我選擇多個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/

來源

2015-10-06 13:10:37

非常感謝，現在工作 –

獲得多個選擇選項，並在正常選擇中分別逐一添加它們

回答

相關問題