CODEWITHSUNDEEP
javascriptjqueryhtml
BalajiB
BalajiB

Reputation: 356

Dynamically append dropdown's value text to another dropdown

<select id="mg_sport_game_id1">
   <option value="">Select</option>
   <option value="25">Titans</option>
   <option value="35">Batman</option>
</select>

Now I have to fetch the above dropdown's value and append its value,text to other dropdown

<select id="schedule_winner">
   <option value="">Select</option>
</select>

I am trying as follows

var team1=$("#mg_sport_game_id1").val();
var myOptions = {
    guest_name : guest,
    ($("#mg_sport_game_id1").options[$("#mg_sport_game_id1").selectedIndex].text) : team1
};

$.each(myOptions, function(val, text) {
    $('#schedule_winner').append( new Option(text,val) );
});

I am ending up with following error :

SyntaxError: invalid property id

Upvotes: 1

Views: 3382

Answers (3)

David R
David R

Reputation: 15639

Or even this would work,

$(document).ready(function(){
$('#mg_sport_game_id1').change(function(){
    $('#schedule_winner').append(new Option(this.options[this.selectedIndex].text, this.options[this.selectedIndex].value));
});
});

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

I you want to copy all the option of the first select to the second one you don't have to use each() function, just simply copy the html code :

$('#schedule_winner').html($('#mg_sport_game_id1').html());

If you want to do it using each() method :

$('#mg_sport_game_id1 option').each(function(){
    $('#schedule_winner')
          .append('<option value="'+$(this).val()+'">'+$(this).text()+'</option>');
})

Hope this helps.

$('#schedule_winner').html($('#mg_sport_game_id1').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="mg_sport_game_id1">
   <option value="">Select</option>
   <option value="25">Titans</option>
   <option value="35">Batman</option>
</select>

<select id="schedule_winner">
   <option value="">Select</option>
</select>

Upvotes: 1

empiric
empiric

Reputation: 7878

I don't know exactly what you are trying to achive, but maybe this can help you:

$('#mg_sport_game_id1').on('change', function() {

  var val = $(this).val(),
    text = $(this).find("option:selected").text();

  $('#schedule_winner').append(new Option(text, val));

});

What I do here:

  • Register an event handler for the change event
  • get the value and text from the selected option.
  • Append the new Option to the other select

Example

Upvotes: 2

Related Questions