简体   繁体   中英

select box height is not working in chrome

3 radio buttons and a single select box on the page. clicking on first radio button then in select box it will show contents related to first radio button ,respectively...selecting first radio button its working fine ,when i am selecting second radio button ,the select box height is decreasing ,cant able to visible at all ,third also same ,its happening in chrome ,FF its working fine

my code

 <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 for hiding and showing

  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;
  },

Could something like this work?

$('[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;
});​

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM