如果没有值，则更改选择框的宽度

Question

有人可以通过在jQuery中创建小脚本来帮助我，以便在没有值的情况下使选择框宽度更大吗？这是我的选择框的代码

<td class="value">
    <select>
        <option value="">
            Select one
        </option>
        <option value="100-g"  selected='selected'>
            100 g
        </option>
        <option value="200-g" >
            200 g
        </option>
    </select>
</td>

我需要这样做：.summary table.variations .value { width: 300px; }非常感谢。

Answer 1

http://jsfiddle.net/OxyDesign/2qn0d7rg/

JS

$(document).ready(function(){
    $('select').on('change',function(){
        var select = $(this),
            cell = select.closest('td');
        if(select.val()){
            cell.removeClass('large');
        }else{
            cell.addClass('large');
        }
    });
});

这是你想要的吗？

Answer 2

select {
    min-width:300px;
}

Answer 3

你可以给出最小宽度，所以即使没有值也会适用。

select {
   min-width:300px;
}
option {
    min-width:300px;
}