CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Geril
Geril

Reputation: 159

Change width of selectbox if no value

can someone help me please with creating little script in jQuery to make select box width bigger when is there no value? Here is code for my selectbox 

<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>

and I need to make this: .summary table.variations .value { width: 300px; } Thanks a lot.

Upvotes: 0

Views: 49

Answers (3)

OxyDesign
OxyDesign

Reputation: 754

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');
        }
    });
});

Is it what you want ?

Upvotes: 1

Amar1989
Amar1989

Reputation: 512

you can give min-width , so it will apply even if no value.

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

Upvotes: 0

Sujit Agarwal
Sujit Agarwal

Reputation: 12508

select {
    min-width:300px;
}

Upvotes: 0

Related Questions