Question

我已经多次这样做了，这很简单，但这里有些不对劲我无法看到问题。从此下拉列表中进行选择时，.value始终为null。我知道的比这更好。但我无法看到问题所在。有没有人在这段代码中看到问题？

在我的_Layout.cshtml中，我调用了一个返回局部视图的Controller Action：

@{Html.RenderAction("LanguageListPartial", "Account");}

部分视图：

@Html.DropDownListFor(
    x => x.SelectedLanguage,
    Model.Languages,
    new { @class = "form-control }
)

下拉列表呈现正常：

HTML：

<form method="post" action="/Account/ListPartial">
    <select name="SelectedLanguage" id="SelectedLanguage">
        <option value="en-US">English</option>
        <option value="fr-CA">Francais</option>
        <option value="pt-BR">Portugues</option>
        <option value="es-MX">Espanol</option>
    </select>
</form>

<div id="test"></div>

jQuery呼吁改变：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryUI")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#SelectedLanguage').on('change', function () {
                var a = $(this).val();
                $('#test').load("/Account/TestPartial/" + a);
                return false;
            });
        });
    });
</script>

</body>
</html>

Answer 1

还有一个建议，请尝试ajax async update？

<script type="text/javascript">

        $(function () {
            $('#SelectedLanguage').on('change', function () {
                var a = $(this).val(); 
                $.get("~/Account/TestPartial/"+a, function(data){
                 $("#placeholder").html(data);// update existing div
                }):
            });

    });
 </script>

Answer 2

试试这个：

<script type="text/javascript">
    $(document).ready(function () {
        $(function () {
            $('#SelectedLanguage').on('change', function () {
                var a = $(this).val(); 
                $('#test').load("/Account/TestPartial/" + a);
                return false;
            });
        });
    });
 </script>

jQuery <select>值始终为null </select>

2 个答案: