Maria Nolorbe Maria Nolorbe - 3 months ago 17
CSS Question

Shrink HTML select element when selected

I have a select element as such...

<select id="<? echo $rows['itemname']; ?>" class="weight">
<option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
</select>


This will result in various select boxes when the PHP query is run.

Example:

<select id="Roast_Beef" class="weight" >
<option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="Ham" class="weight" >
<option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
</select>

<select id="Turkey" class="weight">
<option disabled selected value> -- Select Quantity -- </option>
<option value="1">1</option>
<option value="2">2</option>
</select>


MY GOAL

I would like for each select box to SHRINK when an option is selected, but I'm unsure how to use a variable properly so that each element is treated separately.

In trying different things, the furthest I have got was to shrink anything with the weight class, but the obvious problem with that is it shrinks all select boxes as they all will have the WEIGHT class element.

$(".weight").change(function() {
$( ".weight" ).toggle({ effect: "scale", direction: "horizontal" }); //Then you scale EVERYTHING with WEIGHT class
});

Answer

Maybe this is what you're looking for:

$(".weight").change(function() {
  $( this ).toggle({ effect: "scale", direction: "horizontal" });
});
Comments