Question

我正在使用下拉列表进行不同的选择。

 <div class="editor-field">
        @Html.DropDownListFor(model => model.Id, Model.PossibleIds)
        @Html.ValidationMessageFor(model => model.Id)

以下代码将显示Ids的下拉列表1,2,3,4,5。当我在下拉列表中选择1时，会出现一个显示“您已选择1”的文本，依此类推。

现在我必须将以下下拉列表更改为单选按钮

@foreach(var ids in Model.Possibleids)
{
    @Html.RadioButtonFor(model => model.Id, Model.PossibleId)@ids.Text
}

我想要与单选按钮相同的功能，当我选择1号单选按钮时，我想要一个显示“你已选择1”的文本当我选择单选按钮号2时，我想要一个显示“你已选择2”的文本，依此类推。我必须对我的Javascript进行哪些更改才能实现此目的？我当前的Jquery脚本（根据Dropdown，我将Val更改为Onclick或检查事件但没有任何效果）

(function ($) {
    $('#Id').change(function () {
        if ($(this).val() == 1) {
            $('.1-option').hide();
            $('.2-option').show();
            $('.3-option').hide();
            $('.4-option').hide();
            $('.5-option').hide();

        } else if ($(this).val() == 2) {
            $('.1-option').show();
            $('.2-option').show();
            $('.3-option').hide();
            $('.4-option').hide();
            $('.5-option').show();
        }
        else if ($(this).val() == 3) {
            $('.1-option').hide();
            $('.2-option').hide();
            $('.3-option').hide();
            $('.4-option').show();
            $('.5-option').hide();

Answer 1

如果没有看到您的JavaScript，我只能假设您正在使用jQuery。如果是这样，那么以下内容将为您提供所需的信息。

var selectedVal = $("input[type='radio'][name='Id']:checked");
if (selectedVal.length > 0) {
    $('#spanDisplayValue').text(selectedVal);
}

编辑以解决特定代码。我认为上面的代码是一种更有效的方法来实现你的目标，但我给核心逻辑留下了同样的例子。

(function ($) {
    $("input[name=Id]:radio").change(function () {
    var selectedVal = $("input[type='radio'][name='Id']:checked");
    if (selectedVal == 1) {
        $('.1-option').hide();
        $('.2-option').show();
        $('.3-option').hide();
        $('.4-option').hide();
        $('.5-option').hide();

    } else if (selectedVal == 2) {
        $('.1-option').show();
        $('.2-option').show();
        $('.3-option').hide();
        $('.4-option').hide();
        $('.5-option').show();
    }
    else if (selectedVal == 3) {
        $('.1-option').hide();
        $('.2-option').hide();
        $('.3-option').hide();
        $('.4-option').show();
        $('.5-option').hide();

MVC 4使用单选按钮选择不同的输出

1 个答案: