2014-06-17 30 views
0

У меня есть сайт с несколькими формами на одной странице, и я пытаюсь выяснить, как использовать ближайший() для ссылки на раскрывающийся список, близкий к моей кнопке отправки , Вот мой JQuery:Использование .closest() с кнопкой при событии click

var subcategory = $().closest('.subcategoryDropdown option:selected').val(); 

В скобках перед тем .closest ему необходимо ссылаться на мою кнопку, которая не имеет идентификатор я мог бы использовать (так как есть несколько кнопок, которые будут одинаковыми), так что должно быть что-то как триггер события, но я действительно не уверен, как это сделать. Вот мой HTML:

@for (int i = 0; i < Model.PartOverrideModel.PartCriteria.Count; i++) 
    { 
<form id="@String.Format("form{0}", Model.PartOverrideModel.PartCriteria[i].PartNumber)" action=""> 
@Html.HiddenFor(m => m.PartOverrideModel.Manufacturer) 
<div> 
    <div class="leftSide"> 
     <div class="mappingSubtitle">@Resources.EzpConsole.Current_Mapping<span class="partNumber">@Model.PartOverrideModel.PartCriteria[i].PartNumber</span></div> 
     <div> 
      <div class="text">@Resources.EzpConsole.Current_Category</div> 
      <div class="modelText">@Model.PartOverrideModel.PartCriteria[i].CategoryKey</div> 
     </div> 
     <div> 
      <div class="text">@Resources.EzpConsole.Current_Subcategory</div> 
      <div class="modelText">@Model.PartOverrideModel.PartCriteria[i].SubCategoryKey</div> 
     </div> 
    </div> 
    <div class="rightSide"> 
     <div class="mappingSubtitle">@[email protected]iteria[i].PartNumber</div> 
     <div> 
      <div class="rightText">@Resources.EzpConsole.New_Category</div> 
      <div class="mappingDropdowns"> 
       @Html.DropDownListFor(m => m.PartOverrideModel.SelectedCategory, Html.CreateCategorySelectList(Model.AllCategoryDetails, true, null), new { @class = "dropDown categoryDropdown", onchange = "javascript:ezpConsole.partOverride.showSubcategoryDropdown();" }) 
      </div> 
     </div> 
     <div> 
      <div class="rightText">@Resources.EzpConsole.New_Subcategory</div> 
      <span class="mappingDropdowns" id="subcategoryDropdownPlaceholder"> 
       @Html.DropDownListFor(m => m.PartOverrideModel.SelectedCategory, Html.CreateCategorySelectList(Model.AllCategoryDetails, true, null), new { @class = "dropDown", @disabled = "disabled" }) 
      </span> 
      <div class="lowerButton"> 
       <a class="standardWhiteButton" onclick="javascript:ezpConsole.partOverride.updateParts();" 
        href="javascript:void();">@Resources.EzpConsole.Submit</a></div> 
     </div> 
    </div> 
    <div class="divider"> 
    </div> 
</div> 
</form> 
} 

Это также использует частичный вид для второго выпадающего списка, который заполняется на основе выбора пользователь делает на первом падении вниз.

<div> 
    @Html.DropDownListFor(m => m.PartOverrideModel.SelectedCategory, Html.CreateCategorySelectList(Model.AllCategoryDetails, false, (int)ViewBag.CategoryID), new { @class = "dropDown subcategoryDropdown"}) 

+0

1: Является ли эта строка внутри обработчика щелчка на кнопку вы хотите ссылаться на '$()'? 2: Нам нужно увидеть ваш html. –

+0

try $ (this) .closest ('. SubcategoryDropdown option: selected'). Val(); –

+0

Жаль, Джейсон, вот мой html. Он находится внутри функции, вызываемой из представления. До этого это всего лишь базовая проверка. –

ответ

1

Что-то вроде этого?

$('input[type=submit]').click(function() { 
    var subcategory = $(this).closest('form').find('.subcategoryDropdown option:selected').val(); 
    // do something 
}); 

Вот скрипка: http://jsfiddle.net/Niffler/EUFxC/

Смежные вопросы