下拉列表之间的干扰

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>

作为 expected.The 问题是当我像这样添加另一个下拉列表时：

<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>

或者如果您希望能够 select 任何下拉菜单并获得 selected 选项，然后更改为

 <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>

下拉列表之间的干扰

Interference between dropdownlists

c#

asp.net-mvc

dropdownlistfor