Установить значение @ Html.DropDownList на основе Switch?

Question

Установить значение @ Html.DropDownList на основе Switch?

0

Я разрабатываю приложение 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>

Затем у меня есть некоторый jQuery, который используется для чередования, который отображается на основе значения Switch (On/Off), добавляя/удаляя класс hide Bootstrap:

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');
        }
    });

Однако я не могу понять, как установить текущее значение выпадающего списка в пустую (если выбор был сделан), когда переключатель изменится, чтобы отобразить другой выпадающий список. Пользователь должен только иметь возможность сделать выбор для одного из них, и я думал, что будет легче обеспечить соблюдение на этой стороне, а не в сообщении обратно на мой контроллер.

У кого-нибудь есть предложения?

Analytic Lunatic 01 май 2014, в 21:58

Источник

Теги:

jquery

asp.net-mvc

twitter-bootstrap-3

asp.net-mvc-4

1 ответ

Ещё вопросы

Analytic Lunatic · Answer 1 · 2014-05-07T17-59-00.000Z

Добавлен 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("");
    }
});