使用.closest()和点击事件上的按钮

时间:2014-06-17 13:42:29

标签: jquery asp.net-mvc

我在一个页面上有一个包含多个表单的网站,我正在尝试弄清楚如何使用nearest()来引用接近我的提交按钮的下拉列表。这是我的jquery:

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

在.closest之前的括号中,它需要引用我的按钮,它没有我可以使用的id(因为有多个按钮将是相同的)所以它需要像事件触发器,但我'我真的不知道该怎么做。这是我的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">@Resources.EzpConsole.New_Mappings@Model.PartOverrideModel.PartCriteria[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"})

1 个答案:

答案 0 :(得分:1)

这样的东西?

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

这是一个小提琴:http://jsfiddle.net/Niffler/EUFxC/