2

I have some custom Jquery which grabs the id's from a select list, and populates a secondary select list with those that are selected.

I have this working well, however I need the secondary select list needs to display the text value of the selected option. Currently I just get the actual id.

Can anybody assist please?

JQUERY

$('#myselect').change(function() {
        var row = $(".chosen-select").val();
        $('#secondSelect').html('');
        jQuery.each(row, function(i, val) {
            $('#secondSelect').append('<option value=' + val + '>' + val) + '</option>';
        });
});

HTML

First select list

<select data-placeholder="Choose cars..." class="chosen-select" name="myselect[]" id="myselect" multiple>   
<option value="1">Vauxhall</option>                                                                                          
<option value="2">Volvo</option>
etc...
</select>

Second select list

<select name="secondSelect" id="secondSelect">
    <option value="">Select Model</option>
    should be populated here..
</select>
Suba
  • 199
  • 1
  • 2
  • 11
  • I don't really understand what's going on but you can use `.text()` rather than `.val()`. – Shahar Jan 06 '15 at 19:31
  • OK, I'm quite possibly missing something that is straight forward to you. I appreciate that I can use text() but how I implement it is where I fall over. – Suba Jan 06 '15 at 19:33
  • `$('#secondSelect').html( $('', {value : $(".chosen-select").val(), text : $(".chosen-select").text()}) );` – adeneo Jan 06 '15 at 19:34
  • check this fiddle, is this what you wanted? http://jsfiddle.net/Lkyvbdsz/ – eg_dac Jan 06 '15 at 19:36
  • Hi eg_dac, almost :-) It wasn't populating the id. – Suba Jan 06 '15 at 19:43

1 Answers1

1

What about this? fiddle

$('#myselect').change(function() {
        $('#secondSelect').html('');
        jQuery.each($("option:selected",this), function(i, val) {
            $('#secondSelect').append($(val).clone());
        });
});
acontell
  • 6,792
  • 1
  • 19
  • 32