изменить содержат в поле выбора в JQuery

Question

У меня 2 полей выбора, как:

<select id="bu_id"> 
    <option value="1">India</option> 
    <option value="2">US</option> 
    <option value="3">UK</option> 
</select> 

и

<select id="role_id"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 

Теперь текст 2-й выберите поле по опции тега должен быть изменен в зависимости от выбора пользователя 1-го блока выбора. например если пользователь изменяет параметр США, то второй выберите поле Шо-л.д. будет выглядеть как:

<select id="role_id"> 
    <option value="1">One</option> 
    <option value="2">Two dollar</option> 
    <option value="3">Three</option> 
    <option value="4">Four dollar</option> 
</select> 

Я написал свой код, как:

if($('#bu_id option:selected').text() == 'India'){ 
    $('#role_id option:contains("Two")').text('Two dollar'); 
    $('#role_id option:contains("Four")').text('Four dollar'); 
} 

Но он работает в Firefox, а не в хроме. Не могли бы вы помочь мне решить эту проблему?

Заранее спасибо.

Answer 1

Не понимаю, почему он не будет работать на хроме. Обычно в <select> первый <option> по умолчанию. Поскольку в вашей разметке ваш первый <option> - «Индия», код будет выполнен. См. Это jsfiddle.

Вы делаете это на документе ready()? Я думаю, вы должны обернуть это на событие change(). Потому что я не могу понять, почему вы только меняете два варианта (варианты 2 и 4) и почему валюта Индии - доллары.

---

Разметка и сценарий ниже - всего лишь предложение. Я не знаю, действительно ли это то, что вы хотите делать или нет, а просто для того, чтобы дать вам представление.

<select id="bu_id"> 
    <option value="Rupee">India</option> 
    <option value="Dollar">US</option> 
    <option value="Pound">UK</option> 
</select> 

<select id="role_id"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select> 

JQuery:

$('#bu_id').change(function(){ 
    var val = $(this).val(); 

    $('#role_id option').each(function(){ 
     var text = $(this).text();  
     text = text.split(' ')[0]; 

     if($(this).is(':first-child')){ 
      text = text+' '+val 
     }else{ 
      text = text+' '+val+'s' 
     } 

     $(this).text(text)   
    }); 

}).trigger('change'); 

Проверить это jsfiddle.