Получить идентификатор выбранного варианта Родитель

У меня есть карусель продуктов, которые имеют несколько элементов управления select и изображение для каждого. Каждый select элемент имеет ту же функцию изменения:Получить идентификатор выбранного варианта Родитель

   $('#abcFlavor') 
       .add('#furyFlavor') 
       .add('#mrpFlavor') 
       .add('#proFlavor') 
       .change(function() { 
        //some code... 
      });

и вот образец HTML:

<div class="shop-latest-carousel"> 
    <ul id="latest_products"> 
     <li> 
      <form target="" action="..." method="post"> 
       <div class="product-list-item"> 
        <span class="hover"></span> 
        <div class="image" id="imageABC"> 
         <a> 
          <img id="ABC_grape" src="images/shop_images/ABC_grape.png" alt=""></a> 
        </div> 
        <div class="details fixclear"> 
         <h3>ABC</h3> 
         <label for="abcFlavor">Flavor:</label> 
         <select name="os0" id="abcFlavor"> 
          <option id="grape" value="Grape">Grape $2.99 USD</option> 
          <option id="peach" value="Peach">Peach $22.99 USD</option> 
          <option id="watermelon" value="Watermelon">Watermelon $12.99 USD</option> 
          <option id="cherry" value="Cherry">Cherry $12.99 USD</option> 
          <option id="lemonade" value="Lemonade">Lemonade $5.99 USD</option> 
         </select> 
         <div class="actions"> 
          <input type="image" src="~/Images/shop_images/addToCart.png" name="submit" alt=""> 
         </div> 
         <div class="price"> 
          $<span>52.99</span> 
          <small>$67.49</small> 
          <br /><br /> 
         </div> 
        </div> 
       </div> 
       <input type="hidden" name="on0" value="Flavors"> 
      </form> 
      <!-- end ABC --> 
     </li> 
     <li> 
      <form target="" action="..." method="post"> 
       <div class="product-list-item"> 
        <span class="hover"></span> 
        <div class="image" id="imageFury"> 
         <a> 
          <img id="img_fury_lemonlime" src="images/shop_images/Fury_lemonlime.png" alt=""></a> 
        </div> 
        <div class="details fixclear"> 
         <h3>Fury</h3> 
         <label for="furyFlavor">Flavor:</label> 
         <select name="os0" id="furyFlavor"> 
          <option id="lemonline" value="Lemon-Lime">Lemon-Lime $19.99 USD</option> 
          <option id="melon" value="Melon">Melon $9.99 USD</option> 
         </select> 
         <div class="actions"> 
          <input type="image" src="~/Images/shop_images/addToCart.png" name="submit" alt=""> 
         </div> 
         <div class="price"> 
          $<span>39.99</span> 
          <small>$47.24</small> 
          <br /><br /> 
         </div> 
        </div> 
       </div> 
       <input type="hidden" name="on0" value="Flavors"> 
      </form> 
      <!-- end Fury --> 
     </li> 
    </ul> 
</div>

Как я могу сделать переключатель заявление на «ID» из select элемента, который уволил событие (а не «id» выбранного параметра)?

Я пытался что-то вроде:

var sel = $(this).parent().attr("id");

но продолжает возвращаться 'неопределенными'.

источник

2013-06-06 Robert

Вам не нужны все эти '.Add()' вызовы, метод ' событие change' срабатывает только в 'select', а не в параметрах. – Barmar

В обработчик события обратного вызова, this является DOM select элемент, так:

switch (this.id) { 
    case "abcFlavor": 
     // ... 
     break; 
    // and so on 
}

Пример (только с указанием id, но в этот момент, конечно, вы можете switch на него): Live Copy | Live Source

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<meta charset=utf-8 /> 
<title>jQuery 'this' example</title> 
</head> 
<body> 
    <label>abcFlavor: <select id="abcFlavor"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option></select></label> 
    <br><label>furyFlavor: <select id="furyFlavor"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option></select></label> 
    <br><label>mrpFlavor: <select id="mrpFlavor"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option></select></label> 
    <br><label>proFlavor: <select id="proFlavor"> 
    <option>One</option> 
    <option>Two</option> 
    <option>Three</option></select></label> 
    <script> 
    (function($) { 
     $('#abcFlavor') 
     .add('#furyFlavor') 
     .add('#mrpFlavor') 
     .add('#proFlavor') 
     .change(function() { 
     display("You changed " + this.id); 
     }); 

     function display(msg) { 
     $("<p>").html(String(msg)).appendTo(document.body); 
     } 
    })(jQuery); 
    </script> 
</body> 
</html>

Side Примечание: Вы можете пропустить все эти add вызовы с использованием запятых в вашем селекторе:

$('#abcFlavor, #furyFlavor, #mrpFlavor, #proFlavor').change(function() { 
    // Code here 
});

источник

2013-06-06 17:53:43

Или используйте один класс для привязки поведения ко всем

Получить идентификатор выбранного варианта Родитель

ответ