0

我有 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 中工作。你能帮我解决这个问题吗？

提前致谢。

4

1 回答 1

0

我不明白为什么它不能在 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。

于 2013-12-04T12:14:20.100 回答