HTML 选择较短选项时下拉更改大小

Question

I have this bit of HTML:

 <select name="tables" id="tables"> <option value="random">Random</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>

My problem is that "Random" is has a lot more characters than "1", "2",or "3". When I select, lets say, "2", the box is still the same size as "Random" (try it above). Can I make the size automatically change as the input changes? Even if the number goes to 135? I'm not new to JavaScript either, so if there is a way to achieve it using JS, I'd be grateful!

Answer 1

You can create a hidden view to store the selected item and get the width corresponding to it and then set the width to your selected view. Check the below example.

 $(document).ready(function() { $('#resizing_select').change(function(){ $("#width_tmp_option").html($('#resizing_select option:selected').text()); $(this).width($("#width_tmp_select").width()); }); });

 #resizing_select { width: 80px; } #width_tmp_select{ display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="resizing_select"> <option>random</option> <option>1</option> <option>2</option> <option>2</option> </select> <select id="width_tmp_select"> <option id="width_tmp_option"></option> </select>