javascript - 选择时收缩 HTML 选择元素

Question

我有一个这样的选择元素...

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

这将在运行 PHP 查询时产生各种选择框。

例子:

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

我的目标

我希望每个选择框在选择一个选项时收缩，但我不确定如何正确使用变量以便单独处理每个元素。

在尝试不同的事情时，我所能做的最多的就是缩小任何带有权重类的东西，但这样做的明显问题是它缩小了所有选择框，因为它们都将具有 WEIGHT 类元素。

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

Answer 1

也许这就是您正在寻找的:

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