如何用 Jquery/JS 交换 2 @Html.DropDownListFor答案

【问题标题】：How to swap 2 @Html.DropDownListFor with Jquery/JS如何用 Jquery/JS 交换 2 @Html.DropDownListFor
【发布时间】：2015-07-06 13:25:43
【问题描述】：

我在 SO 中找到了一些示例。但他们都没有为我工作。我想交换 2 @Html.DropDownListFor 的值。除了要显示的默认值外，这两个 DropDownList 都包含相同的值集。下面是我的代码。

<div class="currency_swap">
<p>
    <label>From</label>
    <div class="swap_dropdown">
        @Html.DropDownListFor(m => m.SourceCurrencyname, new SelectList(ViewBag.CurrencyNames, "Currency_Code", "Currency_Code"), "---- All ----")
    </div>
</p>
<div><input type="button" id="swap_up" value="&#x25B2" class="swap" /></div>
<p>
    <label>To</label>
    <div class="swap_dropdown">@Html.DropDownListFor(m => m.TargetCurrencyname, new SelectList(ViewBag.CurrencyNames, "Currency_Code", "Currency_Code"), "Agency Currency")</div>
</p>
</div>

<script type="text/javascript">
$(".swap").click(function () {
    var row = $(this).closest(".currency_swap");
    var start = row.find("swap_dropdown:first select");
    var end = row.find("swap_dropdown:last select");
    var temp = start.val();
    start.val(end.val());
    end.val(temp);
});
</script>

【问题讨论】：

标签： javascript jquery html asp.net-mvc-3 dropdownlistfor

【解决方案1】：

start 和 end 变量设置不正确。选择器可能如下所示。

var start = row.find(".swap_dropdown select:first");
var end = row.find(".swap_dropdown select:last");

其余代码正常工作，请参阅 js-fiddle here。

【讨论】：