Question

在我看来，我有一个像

这样的代码

<div id="DDLs">
<p>Begin: @Html.DropDownListFor(model => model.ItemID, Model.items, new { @id = "list1" })</p>
</div>  
...

<script type="text/javascript">
$(document).ready(function () {
    $("#list1").change(function () {
        var countrySelected = $("select option:selected").first().text();
        $.get('@Url.Action("MyAction")',
            { id: countrySelected }, function (data) {
                $("#apendedInfo").html(data);
            });
    });
});
</script>

这是按预期工作的。问题是当我添加另一个下拉列表时：

<div id="DDLs">
<p>Begin: @Html.DropDownListFor(model => model.ItemID, Model.items, new { @id = "list1" })</p> 
<p>Options: @Html.DropDownListFor(model => model.Option, @ViewBag.Options as SelectList, new { @id = "list2"})</p> 
</div>

添加后，有时会使用添加的下拉列表的选定值触发更改事件，而不是我期望的那个。我不明白为什么。

修改感谢dansasu11的回答，我已经明白问题是符合的：

var countrySelected = $("select option:selected").first().text();

我把它改为：

var countrySelected = $(this).val();

现在一切正常 - 找不到所选项目的文本，我得到了它的价值，这也很好。

也许我应该花更多时间学习jQuery。

Answer 1

尝试

 <script type="text/javascript">
    $(document).ready(function () {
          $("#list1").change(function () {
    var countrySelected = $(this).find("option:selected").text();
    $.get('@Url.Action("MyAction")',
        { id: countrySelected }, function (data) {
            $("#apendedInfo").html(data);
        });
});
 });
</script>

或者如果您希望能够选择任何下拉列表并获取所选选项，请转到

 <script type="text/javascript">
  $(document).ready(function () {
$("select").change(function () {
    var countrySelected = $(this).find("option:selected").text();
    $.get('@Url.Action("MyAction")',
        { id: countrySelected }, function (data) {
            $("#apendedInfo").html(data);
        });
    });
 });
  </script>

下拉列表之间的干扰

1 个答案: