термоусадочную 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" }); 
}); 

Answer 2

Использование $(this) для Acces текущего измененного элемента вместо $(".weight").

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

Answer 3

Используйте select.weight только целевой отборное с этим классом, а затем использовать this обратиться к нему:

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