Question

我正在开发一个MVC 4应用程序。我在下面的视图中使用Bootstrap Switch来交替显示“成员组织”下拉列表或“赞助商”下拉列表：

    <input type="checkbox" value="12345" name="Sponsor-Organization" checked class="userCreate-BSSwitch"/> 

    <div style="margin-bottom: 15px">   <div class="row switchOn">
        <div class="editor-label">
                @Html.LabelFor(model => model.MemberOrgId, "Organization")
            </div>
            <div class="editor-field">
                @Html.DropDownList("OrganizationId", null, String.Empty, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.MemberOrgId)
            </div>
        </div>

        <div class="row switchOff">
            <dliv class="editor-label">
                @Html.LabelFor(model => model.SponsorOrgId, "Sponsor")
            </dliv>
            <div class="editor-field" >
                @Html.DropDownList("SponsorId", null, String.Empty, new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.SponsorOrgId)
            </div>
        </div>
    </div>

然后我通过添加/删除Bootstrap hide类，使用一些jQuery来替换，这是基于Switch值（On / Off）显示的：

script type="text/javascript">
    jQuery(document).ready(function () {
        setTimeout(function () { $("#alert").alert('close'); }, 5000);
        $('.switchOff').addClass('hide');

    });  
    $.fn.bootstrapSwitch.defaults.onText = 'Member';
    $.fn.bootstrapSwitch.defaults.offText = 'Sponsor';
    $.fn.bootstrapSwitch.defaults.offColor = 'info';
    $.fn.bootstrapSwitch.defaults.animate = false;

    //$.fn.bootstrapSwitch.defaults.size = 'large';
    $(document).ready(function () {
        $('input:checkbox[name="Sponsor-Organization"]').bootstrapSwitch();
    });

    $('input:checkbox[name="Sponsor-Organization"]').on('switchChange.bootstrapSwitch', function (event, state) {
        var checked = state;
        if (checked) {
            $('.switchOn').removeClass('hide');
            $('.switchOff').addClass('hide');
        }
        else {
            $('.switchOff').removeClass('hide');
            $('.switchOn').addClass('hide');
        }
    });

我似乎无法弄清楚的是，当交换机切换到显示另一个下拉列表时，如何将当前下拉列表值设置为空白（如果已进行选择）。用户应该只能选择其中一个，我认为在这一侧执行更容易，而不是在帖子中回到我的控制器。

有人有建议吗？

Answer 1

在每个下拉列表中添加ID，然后在我的jQuery中引用它。

    <div style="margin-bottom: 15px">        
        <div class="row switchOn">
            <div class="editor-label">
                @Html.LabelFor(model => model.MemberOrgId, "Organization")
            </div>
            <div class="editor-field">
                @Html.DropDownList("OrganizationId", null, String.Empty, new { @class = "form-control", @id = "OrgIdDropDown" })
                @Html.ValidationMessageFor(model => model.MemberOrgId)
            </div>
        </div>

        <div class="row switchOff">
            <dliv class="editor-label">
                @Html.LabelFor(model => model.SponsorOrgId, "Sponsor")
            </dliv>
            <div class="editor-field" >
                @Html.DropDownList("SponsorId", null, String.Empty, new { @class = "form-control", @id = "SponsorIdDropDown" })
                @Html.ValidationMessageFor(model => model.SponsorOrgId)
            </div>
        </div>
    </div>

<强> jQuery的：

$('input:checkbox[name="Sponsor-Organization"]').on('switchChange.bootstrapSwitch', function (event, state) {
    var checked = state;
    if (checked) {
        $('.switchOn').removeClass('hide');
        $('.switchOff').addClass('hide');
        $('#SponsorIdDropDown').val("");
    }
    else {
        $('.switchOff').removeClass('hide');
        $('.switchOn').addClass('hide');
        $('#OrgIdDropDown').val("");
    }
});

基于Switch设置@ Html.DropDownList的值？

1 个答案: