CODEWITHSUNDEEP
javascriptjquery
user1765862
user1765862

Reputation: 14145

setting selected value inside combobox using its name not index

If I'm rendering combobox like this

    $('#MyCombo').html('<option value=""></option>');
    $.each(mydata, function (i, v) {
       $('#MyCombo').append('<option value="' + v.PersonId+ '">' + v.PersonName + '</option>');
    });

how can I set selected value inside combobox if v.PersonName == 'John'

p.s. I know that I can set value using it's index 

 $('#MyCombo').prop('selectedIndex', 2);

but in this case I don't know the index, I just know the name.

Upvotes: 2

Views: 98

Answers (6)

Mackan
Mackan

Reputation: 6271

$('#MyCombo option').filter(function () { 
    return $(this).html() == "John"; 
}).prop('selected', true);

Upvotes: 1

Arif H-Shigri
Arif H-Shigri

Reputation: 1136

You can easily do this as 

   $('#MyCombo').html('<option value=""></option>');
    $.each(mydata, function (i, v) {
       $('#MyCombo').append('<option value="' + v.PersonId+ '">' + v.PersonName + '</option>');
    });
$('#MyCombo').value = "Jhon'sId";

Upvotes: 2

giorgio
giorgio

Reputation: 10202

You can make use of the jQuery.prop() function. I like this more then writing the full html twice.

Example on jsFiddle

var options = [
    { value: 'foo',  label: 'Lorem' },
    { value: 'bar', label: 'Ipsum' },
    { value: 'juice', label: 'Orange' }
];

$.each(options, function() {
    var option = $('<option/>')
        .text(this.label)
        .val(this.value);

    if ( this.value == 'bar' ) {
        option.prop('selected', 'selected');
    }

    option.appendTo($('select'));
});

Upvotes: 1

Nitheesh
Nitheesh

Reputation: 19986

Try this.

$('#MyCombo').html('<option value=""></option>');
$.each(mydata, function (i, v) {
    $('#MyCombo').append('<option value="' + v.PersonId + '" '+ 
                         (v.PersonName == 'John ')? 'selected ' : '' +'>' + 
                         v.PersonName + '</option>');
});

Upvotes: 2

Anurag_Soni
Anurag_Soni

Reputation: 542

You can do it like this 

$('#MyCombo').html('<option value=""></option>');
$.each(mydata, function (i, v) 
{
    if(v.PersonName == 'John')
    {
        $('#MyCombo').append('<option value="' + v.PersonId + '"selected>' + v.PersonName + '</option>');
    }
    else
    {
        $('#MyCombo').append('<option value="' + v.PersonId + '">' + v.PersonName + '</option>');
    }
};

Upvotes: 0

Sankar
Sankar

Reputation: 7107

One Simple answer

$('#MyCombo').html('<option value=""></option>');
    $.each(mydata, function (i, v) {
       if (v.PersonName== 'John')
          $('#MyCombo').append('<option selected value="' + v.PersonId+ '">' + v.PersonName + '</option>');
       else
          $('#MyCombo').append('<option value="' + v.PersonId+ '">' + v.PersonName + '</option>');
    });

Upvotes: 0

Related Questions