Question

页面上有3个单选按钮和一个选择框。点击第一个单选按钮然后在选择框中它将分别显示与第一个单选按钮相关的内容...选择第一个单选按钮使其工作正常，当我选择第二个单选按钮时，选择框高度正在减小，无法看到在第三，也是相同，它发生在铬，FF其工作正常

我的代码

 <label><input type="radio" name="reward-venue" value="Fly" checked /><div class="radio-icon Fly-sprite"></div></label>
    <label><input type="radio" name="reward-venue" value="Drive" /><div class="radio-icon Drive-sprite"></div></label> 
    <label><input type="radio" name="reward-venue" value="Stay" /><div class="radio-icon Stay-sprite"></div></label> 



 <div>
    Reward program
      <select name="program">
        <option value=""> - select one - </option>
        {{#fly_programs}}
        <optgroup label="Fly">
          {{#reward_program}}
          <option value="{{reward_program_id}}">{{name}}</option>
          {{/reward_program}}
        </optgroup>
        {{/fly_programs}}
        {{#drive_programs}}
        <optgroup label="Drive">
          {{#reward_program}}
          <option value="{{reward_program_id}}">{{name}}</option>
          {{/reward_program}}
        </optgroup>
        {{/drive_programs}}
        {{#stay_programs}}
        <optgroup label="Stay">
          {{#reward_program}}
          <option value="{{reward_program_id}}">{{name}}</option>
          {{/reward_program}}
        </optgroup>
        {{/stay_programs}}
      </select>
  </div>

用于隐藏和显示的js

  var show_optgroup = $('optgroup[label=' + venue_name + ']')
    , hide_optgroup = $('optgroup[label!=' + venue_name + ']')
    ;

    show_optgroup.show();
    show_optgroup.children('option').show();
    hide_optgroup.hide();
    hide_optgroup.children('option').hide();

    this.$el.find('option:selected').removeAttr('selected');
    this.$el.find('option:first').attr('selected', 'selected');
    $.uniform.update();
    return this;
  },

Answer 1

这样的事可以吗？

$('[name="reward-venue"]').click(function(){
    $('optgroup[label!='+$(this).val()+']').hide();
    $('optgroup[label!='+$(this).val()+']').children('option').hide();  
    $('optgroup[label='+$(this).val()+']').show();
    $('optgroup[label='+$(this).val()+']').children('option').show();
    $('[name="program"]')[0].selectedIndex=0;
});

选择框高度不适用于chrome

1 个答案: