Javascript 如何在“选择”下拉列表中显示选定复选框的值？

以下是JSFIDLE：

由于某些原因，javascript无法在js FIDLE中工作。我担心的是，当我选中多个复选框时，值会立即正确显示，而无需提交任何按钮

如何在当前列出所有编程语言的框中显示这些选定值

如何将下面的脚本更改为我想要的

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>

---

谢谢你的帮助。。提前谢谢。

请看小提琴，它现在可以用了：

我改变了事件的命名方式：

$(".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>

---

这是你想要的行为吗

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();
    }

---

非常感谢，我根据你的链接编辑了我的链接。现在可以了，但是如何在“选择”下拉列表中显示值呢？@samantha你的意思是要显示值，而不是数字？目前它可以显示数字索引，对吗？不是那样。你看到下面列出的框了吗，HTML、CSS、Jquery、regex等等？我希望选中复选框的值列在这里。@samantha，你的意思是，实际上，你不想要值HTML、CSS、Jquery，这些值应该来自复选框？这正是我想要的！目前它是硬编码值，但我希望它来自复选框。非常感谢…正是我想要的！