如何在删除项目时保持选择框的宽度不变？

Question

I have two SELECT boxes on a page I am working on. Selecting a value in the first box causes the options available in the second box to be filtered, and I keep an empty option on top of both boxes. When the selected option of the first box is the empty box, I show all of the options in the second box.

The issue is that both boxes are in a flexbox container with additional fields to the right. Whenever I change the selected option in the first box, the width of the second box changes and then all of the fields to the right are moved around. What I need to be able to do is keep the second box from shrinking when items are filtered out when I change the selection of the first box. I want to be able to set the min-width CSS property of the second select box but since the starting width is based on the content and not set in CSS, I can't use $('#second-box').width() to set the min-width property since it returns 0.

How can I go about determining the content-based width of the second box in javascript to prevent the resizing?

<div class="VerticalField">
    <label for="FirstBox" id="lblFirstBox" class="FormLabel VerticalLabel">First Box</label>
    <select id="FirstBox" class="FormTextBox VerticalTextBox" onchange="filterSecondBox()">
        <option value=""></option>
        <option value="51">Option 51</option>
        <option value="56">Option 56</option>
        <option value="63">Option 63</option>
        <option value="65">Option 65</option>
    </select>
</div>

<div class="VerticalField">
    <label for="SecondBox" id="lblSecondBox" class="FormLabel VerticalLabel">Second Box</label>
    <select id="SecondBox" class="FormTextBox VerticalTextBox">
        <option value=""></option>
        <option value="5101">Sub Option 5101</option>
        <option value="5601">Sub Option 5601</option>
        <option value="5602">Sub Option 5602</option>
        <option value="6301">Sub Option 6301</option>
        <option value="6302">Sub Option 6302</option>
        <option value="6303">Sub Option 6303</option>
        <option value="6501">Sub Option 6501</option>
        <option value="6502">Sub Option 6502</option>
        <option value="6503">Sub Option 6503</option>
    </select>
</div>

And this is my Javascript:

$('#SecondBox').css('minWidth', $('#SecondBox').width()));

function filterSecondBox()
{
    if ($('#FirstBox').data('options') === undefined)
    {
        $('#FirstBox').data('options', $('#SecondBox option').clone());
    }
    var id = $('#FirstBox').val();
    var options;
    if (id == "")
    {
        options = $('#FirstBox').data('options');
        $('#SecondBox').html(options);
    }
    else
    {
        options = $('#FirstBox').data('options').filter('[value^=' + id + ']');
        $('#SecondBox').html(options);
        $('#SecondBox').prepend($('#FirstBox').data('options').first());
    }  

    $('#SecondBox').val('');
}

filterSecondBox();

Clearly "$('#SecondBox').css('minWidth', $('#SecondBox').width());" doesn't work as the width isn't set so I'm not sure how to determine what the content-based width is to set the minWidth property with.

Answer 1

将第二个选择的CSS宽度属性设置为固定宽度。