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

Question

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

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

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

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

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

fiddle