Question

我有一个asp.net web应用程序，其中div为popup。在弹出窗口中，正在动态生成选择元素。 Resulant html看起来像这样（每个选择的data-id不同）：

<div class="header">
    <div>Please select the options for your product.</div>
</div>
<div class="content">
    <div class="formfield clearfix">
        Topping
        <select id="items" data-id="1">
            <option value="0">Select</option>
            <option 1="">Strawberry</option>
            <option 2="">Apple Pie</option>
        </select>
    </div>
    <div class="formfield clearfix">
        Size
        <select id="items" data-id="2">
            <option value="0">Select</option>
            <option 3="">Small</option>
            <option 4="">Medium</option>
            <option 5="">Large</option>
        </select>
    </div>
</div>
<div class="footer">
    <a href="javascript:$('#product-options').submit();" class="btn btn-orange-2ln"><span>Continue Shopping</span></a>
    <a href="javascript:$('#product-options').submit();" class="btn btn-red-2ln"><span>Checkout</span></a>
</div>
<div id="error">Not selected!</div>
<div id="valid">Validated!</div>
<div id="result"></div>

我想确保从每个下拉列表中选择一个项目。否则会出现错误div。

这是我正在使用的jQuery：

$(document).ready(function () {
    $('#product-options').submit(function (e) {
        debugger;
        var check = $('#items').val()
        if (check == '0') {
            $('#error').show();
            $('#valid').hide();
        } else {
            $('#error').hide();
            $('#valid').show();
        }
        e.preventDefault();
    });
    $('#mySelect').change(function (e) {
        $('#result').html($('#items option:selected').text());
    })
});

更新

Razor视图

<div id="dvContents" style="display: none">
    @using (Html.BeginForm("AddToCart", "Home", FormMethod.Post, new { id = "product-options" }))
    {
        @Html.AntiForgeryToken()
        @Html.ValidationSummary()

        <div id="error">Not selected!</div>
        <div id="valid">Validated!</div>
        <div id="result"></div>

        @Html.Hidden("ItemId", @Model.ItemID)
        @Html.Hidden("QuantityLimit", @Model.QuantityLimit)
        <div class="header">
            <div>Please select the options for your product.</div>
        </div>
        <div class="content">
            @foreach (var item in Model.AssociatedItemOptions)
            {
                <div class="formfield clearfix">
                    @item.OptionName.Trim()
                    <select id="items" class="items" data-id="@item.ItemOptionID">
                        <option value="0">Select</option>
                        @foreach (var option in item.OptionValues)
                        {
                            <option @option.ItemOptionValueID>@option.Value</option>
                        }
                    </select>

                </div>

            }
        </div>
        <div class="footer">
            <a href="#" class="btn btn-orange-2ln"><span>Continue Shopping</span></a>
            <a href="javascript:$('#product-options').submit();" class="btn btn-red-2ln"><span>Checkout</span></a>
        </div>
    }

    @*  @if (!String.IsNullOrWhiteSpace(Model.SelectedItem))
    { <span>Selected Item : @Model.SelectedItem</span> } - *@
</div>



 $('a.btn').click(function (e) {
        debugger;
        $('#error').hide();
        $('#valid').show();
        $('select').each(function () {
            if ($(this).val() == "0") {
                $('#error').show();
                $('#valid').hide();
                e.preventDefault();
            }
            else {
                $('#product-options').submit();
            }
        });

    });
    $('select').change(function (e) {
        $('#result').html($(this).find('option:selected').text());
    })

但它不起作用。我怎么能这样做？

Answer 1

您有选择的重复ID。因此，$('#items').val()将获得第一个选择的值。试试这个：

 $('#error').hide();
 $('#valid').show();
 $('select').each(function(){
    if($(this).val()=="0"){
      $('#error').show();
      $('#valid').hide();
    }
 });

<强> Working Fiddle

Answer 2

你的问题在于：

<select id="items" data-id="1">

这些id属性必须是唯一的。

要么按类替换它们：

<select class="items" data-id="1">:

或者给他们编号：

<select id="items1" data-id="1">

然后修改您的JavaScript：

$('.items').each(function(){ // (This works best with `class="items"`)
    if($(this).val()=="0"){
        $('#error').show();
        $('#valid').hide();
    }
});

使用jquery在弹出窗口上选择元素验证

2 个答案: