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.