如何在選擇下拉列表中顯示所選復選框的值？

Question

這是jsfiddle： https ://jsfiddle.net/a1gsgh11/9/

由於某種原因，JavaScript無法在js中操作。 我擔心的是，當我選擇多個復選框時，這些值將正確且立即顯示，而無需提交任何按鈕。

如何在當前列出所有編程語言的框中顯示這些選定的值？

如何將以下腳本更改為我想要的內容？

function moveAll(from, to) {
        $('#'+from+' option').remove().appendTo('#'+to); 
    }

    function moveSelected(from, to) {
        $('#'+from+' option:selected').remove().appendTo('#'+to); 
    }
    function selectAll() {
        $("select option").attr("selected","selected");
    }

我想在下面的選擇下拉列表中顯示選定的復選框值：

<form name="selection" method="post" onSubmit="return selectAll()"> 
    <select multiple size="10" id="from">
      <option value="html">Html</option>
      <option value="css">Css</option>
      <option value="google">Google</option>
      <option value="javascript">Javascript</option>
      <option value="jquery">Jquery</option>
      <option value="regex">Regex</option>
      <option value="php">Php</option>
      <option value="mysql">Mysql</option>
      <option value="xml">Xml</option>
      <option value="json">Json</option>
    </select>
    <div class="controls"> 
        <a href="javascript:moveAll('from', 'to')">&gt;&gt;</a> 
        <a href="javascript:moveSelected('from', 'to')">&gt;</a> 
        <a href="javascript:moveSelected('to', 'from')">&lt;</a> 
        <a href="javascript:moveAll('to', 'from')" href="#">&lt;&lt;</a> </div>
    <select multiple id="to" size="10" name="topics[]"></select>
    <form>

此行顯示在復選框中選中的所有值：

 <output>0 are checked<p>No Values</p></output>

任何幫助表示贊賞。。在此先感謝。

Answer 1

請查看小提琴，它現在可以正常工作： https : //jsfiddle.net/a1gsgh11/16/

我更改了事件的調用方式：

$(".moveAll1").click(function(){

    $('#from option').remove().appendTo($('#to')); 
});
$(".moveAll2").click(function(){

    $('#to option').remove().appendTo($('#from')); 
});

$(".moveSelected1").click(function(){
     $('#from option:selected').remove().appendTo('#to'); 
});

$(".moveSelected2").click(function(){
     $('#to option:selected').remove().appendTo('#to'); 
});

var checked, checkedValues = new Array();
$("input[type=checkbox]").change(function(e) {  
    var selectedtext = ($(this).next().text());
    if($(this).is(':checked'))
    {            
        $("#from").append('<option value="' + selectedtext + '">' + selectedtext +'</option>');  
    }else{
        $('option[value*="' + selectedtext + '"]').remove();
    }

});

HTML：

 <input type="checkbox" name="level" id="level" value="1"><label>Primary</label><br/>
 <input type="checkbox" name="level" id="level" value="2"><label>Upper Secondary</label><br/>
 <input type="checkbox" name="level" id="level" value="3"><label>University</label><br/>
</div>
<div class="small-12 medium-6 large-6 columns">
<input type="checkbox" name="level" id="level" value="4"><label>Lower Secondary</label><br/>
<input type="checkbox" name="level" id="level" value="5"><label>Pre University</label><br/>
<input type="checkbox" name="level" id="level" value="6"><label>Skills/Languages</label><br/>

 <div class="controls"> 
    <a class="moveAll1">&gt;&gt;</a> 
    <a class="moveSelected1">&gt;</a> 
    <a class="moveSelected2">&lt;</a> 
    <a class="moveAll2" href="#">&lt;&lt;</a>
 </div>

Answer 2

這是您想要的行為嗎？

var ele = $(this);
    var from = $('select#from');
    if (ele.prop('checked')) {
        var opt = $("<option></option>")
            .attr("value", ele.val())
            .attr('id', 'op' + ele.val())
            .text(ele.val());

            from.append(opt);
    } else {

        var opt = $('#op' + ele.val());
        opt.remove();
    }

小提琴