ページ上の 3 つのラジオ ボタンと 1 つの選択ボックス。最初のラジオボタンをクリックすると、選択ボックスにそれぞれ最初のラジオボタンに関連するコンテンツが表示されます...最初のラジオボタンを選択すると正常に機能し、2番目のラジオボタンを選択すると、選択ボックスの高さが減少し、表示できなくなりますまったく、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;
},