Невозможно установить выбрать выбранное значение с помощью JQuery

Question

Вот мой HTML код

<select id="ddlCountry" placeholder="optional" class="select" title="Select Country"> 
<option value="0">Select Country</option> 
</select> 

Вот код JQuery .....

$(document).ready(function() { 

    $('select.select').each(function() { 
    var title = $(this).attr('title'); 
    if ($('option:selected', this).val() != '') { 
     title = $('option:selected', this).text(); 
     $(this) 
     .css({ 
      'z-index': 10, 
      'opacity': 0, 
      '-khtml-appearance': 'none' 
     }) 
     .after('<span class="select">' + title + '</span>') 
     .change(function() { 
      val = $('option:selected', this).text(); 
      $(this).next().text(val); 
     }) 
    } 
    }); 


    var country = [{ 
    "CountryID": 1, 
    "CountryName": "Afghanistan" 
    }, { 
    "CountryID": 2, 
    "CountryName": "Albania" 
    }, { 
    "CountryID": 3, 
    "CountryName": "Algeria" 
    }, { 
    "CountryID": 4, 
    "CountryName": "American Samoa" 
    }, { 
    "CountryID": 5, 
    "CountryName": "Andorra" 
    }, { 
    "CountryID": 6, 
    "CountryName": "Angola" 
    }, { 
    "CountryID": 7, 
    "CountryName": "Anguilla" 
    }, { 
    "CountryID": 8, 
    "CountryName": "Antarctica" 
    }, { 
    "CountryID": 9, 
    "CountryName": "Antigua and Barbuda" 
    }, { 
    "CountryID": 10, 
    "CountryName": "Argentina" 
    }]; 

    $.each(country, function (index, item) { 
    $('#ddlCountry').append($('<option></option>').val(item.CountryID).html(item.CountryName)); 
    }); 

    $('#ddlCountry').val(2); 
}); 

я поставил выпадающий значение как 2 в готов, но значение по умолчанию всегда Select Country

Вот jsfiddle

Answer 1

Вы не стреляя OnChange событие, когда программно меняющийся выбранное значение выбора. Trigger вручную:

$('#ddlCountry').val(2).change(); 

DEMO

Answer 2

Попробуйте

$("#ddlCountry")[0].selectedIndex = 2; 

вместо

$('#ddlCountry').val(2); 

Answer 3

Вы можете поместить функцию .each ниже этой линии, где вы устанавливаете значение для 2 таким образом:

$('#ddlCountry').val(2); //<---below this one 

    $('select.select').each(function() { 
    var title = $(this).attr('title'); 
    if ($('option:selected', this).val() != '') { 
     title = $('option:selected', this).text(); 
     $(this) 
     .css({ 
      'z-index': 10, 
      'opacity': 0, 
      '-khtml-appearance': 'none' 
     }) 
     .after('<span class="select">' + title + '</span>') 
     .change(function() { 
      val = $('option:selected', this).text(); 
      $(this).next().text(val); 
     }) 
    } 
    }); 

checkout here in this fiddle

Answer 4

Настройка по Значение не вызывает событие change.

Вы можете добавить:

$('#ddlCountry').val(2).trigger('change');