Source: Auto resizing the SELECT element according to selected OPTION’s width. Voir le jsFiddle ici.
|
1 2 3 4 5 6 7 8 |
<select id="resizing_select"> <option>All</option> <option>Longer</option> <option>A very very long string...</option> </select> <select id="width_tmp_select"> <option id="width_tmp_option"></option> </select> |
|
1 2 3 4 5 6 |
$(document).ready(function() { $('#resizing_select').change(function(){ $("#width_tmp_option").html($('#resizing_select option:selected').text()); $(this).width($("#width_tmp_select").width()); }); }); |
|
1 2 3 4 5 6 7 |
#resizing_select { width: 50px; } #width_tmp_select{ display : none; } |
Cas particulier: la page se recharge après sélection
Source: Persist variables between page loads.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ACC.naosPagination.resizeSelectOnTheFly(); var sortOptionsWidth = sessionStorage.getItem('sortOptionsWidth'); $('#sortOptions1').width(sortOptionsWidth); sessionStorage.removeItem('sortOptionsWidth'); resizeSelectOnTheFly: function(){ $('#resizing_select').change(function(){ $("#width_tmp_option").html($('#resizing_select option:selected').text()); $(this).width($("#width_tmp_select").width()); var getWidth = ($('#resizing_select').width()) + 2; sessionStorage.setItem('sortOptionsWidth', getWidth+'px'); }); } |