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>

现在应根据用户对第一个选择框的选择更改选项标签的第二个选择框的文本。例如如果用户更改了US选项，那么第二个选择框应该看起来像：

<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中工作，而不是在chrome中工作。请你帮我解决这个问题？

提前致谢。

Answer 1

我不明白为什么它不适用于chrome。通常在<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。

更改jquery中选择框的包含

1 个答案: