How to display selected checkboxes' values in select dropdown?

Question

here's the jsfiddle : https://jsfiddle.net/a1gsgh11/9/

For some reason , the javascript not working in js fiddle. My concern is, when I select multiple checkboxes, the values displays correctly and immediately without having to submit any button.

How do I display these selected values inside the box that currently listed out all the programming languages?

How do I alter below script into what I want?

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

I want to display the selected checkboxes values inside select dropdown below:

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

this line displays all the values selected in the checkboxes:

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

Any help appreciated.. Thanks in advance.

renakre · Accepted Answer · 2015-04-14 03:54:45Z

1

Please see the fiddle, it is working fine now: https://jsfiddle.net/a1gsgh11/16/

I change the way the events were called:

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

edited Apr 14, 2015 at 3:54

answered Apr 14, 2015 at 3:11

renakre

8,3318 gold badges55 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

samantha Over a year ago

Thanks a lot, I edited my link as per yours. Now that works, but how to display the values inside the select dropdown <option> please?

renakre Over a year ago

@samantha you mean you want to display the values, not the numbers? currently it can display the numbers (indexes) right?

samantha Over a year ago

not that .You see the below box listed out , HTML,CSS,Jquery,regex and so on? I want the values of the selected checkbox to listed here instead.

renakre Over a year ago

@samantha so, you mean, actually, you do not want the values HTML,CSS,Jquery, the values should come from the checkbox?

samantha Over a year ago

exactly that's what I want! Currently it's hardcoded values but I want it to come form the checkbox.

huan feng · Accepted Answer · 2015-04-14 03:44:06Z

1

Is this the behavior you wanted?

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

answered Apr 14, 2015 at 3:44

huan feng

8,7043 gold badges40 silver badges66 bronze badges

1 Comment

samantha Over a year ago

Thanks a lot...exactly what I want!

Collectives™ on Stack Overflow

How to display selected checkboxes' values in select dropdown?

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related