jquery操作select选中时火狐不起作用【原创】

今天遇到一个很有意思的问题，用jquery操作select列表框，动态将某个option的selected属性赋为"selected"，在火狐和chrom下都能实现其赋值，但是在火狐下select列表框的文本并没有变化，在chrome下是有变化的，chrome下是正确的结果，也是我想要的结果。网上查了一下，原来处理让option选中的方法有问题。

html代码

<select id="dict1">
    <option class="dict1_all" value="0">全部</option>
    <option value="1">root</option>
    <option value="8">root1</option>
    <option value="9">root2</option>
</select>
<select id="dict2">
    <option class="dict2_all" value="0">全部</option>
    <option style="display: none;" class="fid_1" value="2">子类1</option>
    <option style="display: none;" class="fid_1" value="3">子类2</option>
    <option style="" class="fid_8" value="4">子类3</option>
</select>

JS代码

$('#dict1').change(function() {
    var dictId = $(this).val();
    //下面这种方法，再FF下赋值是成功的，但是select列表框的文本不会变化，在chrome下会变化
    //$('#dict2 .dict2_all').attr('selected', 'true'); 
    //下面这种方法，可以使select列表框的文本发生变化
    $('#dict2').val(0);
    if(dictId !== 0) {
        $('#dict2').children().not('.dict2_all').hide();
        $('#dict2 .fid_' + dictId).show();  
    }
});