使用JavaScript更改值的MVC DropDownList

我曾尝试编写JavaScript来处理DropDownListFor的更改，但这是错误的。我不想提交变更单。我想从下拉列表中选择一个值，显示列表已更改，但不提交表单，因为表单仍有其他控件需要填写。如何使用jQuery的JavaScript实现这一点？它必须回发吗

以下是我编写的JavaScript代码和表单：

<script type="text/javascript">
    $(function () {
        $('#DropDownListForId').change(function () {
            $('form#myForm').submit();
        });
    });
</script>

<div class="container" style="padding-top: 20px;">
    @Html.LabelFor(x => x.CurrentPub)
    @Html.TextBoxFor(x => x.CurrentPub)
    <br/>
    <br/>
    <div class="form-holder">
        @using (Html.BeginForm(null, null, FormMethod.Post, new {id = "myForm"}))
        {
            <div class="row">
                <div class="col-xs-6">
                    <label>UI Element:</label>
                    @Html.DropDownListFor(m => m.SelectedUIItem, Model.UIItems, new {@id = "DropDownListForId"})
                </div>
                <div class="col-xs-6">
                    @Html.LabelFor(m => m.UseWholeMarkup)
                    @Html.CheckBoxFor(m => m.UseWholeMarkup)
                </div>
            </div>
        }
        <div class="row">
            <div class="col-xs-9">
                @Html.LabelFor(m =>  m.HTMLMarkupCode)
                @Html.TextAreaFor(m => m.HTMLMarkupCode, new { rows = "10", cols = "100" })
            </div>

        </div>
        <div class="row">
            <button class="btn btn-default" type="submit">Submit</button>
        </div>
    </div>
</div> 

@using (Html.BeginForm(null, null, FormMethod.Post, new {id = "myForm", onsubmit="return CheckForm()}))

以下是ViewModel：

public class UIItemsViewModel
    {
        [Display(Name = "Current Pub: ")]
        public string CurrentPub { get; set; }

        // DropDownList
        public string SelectedUIItem { get; set; }
        // public IEnumerable<string> SelectedUIItem { get; set; }
        public IEnumerable<SelectListItem> UIItems { get; set; }

        // Checkbox
        [DisplayName("Use Whole Markup ")]
        public bool UseWholeMarkup { get; set; }

        // Text Area - Whole Markup
        [Display(Name = "HTML Markup Code: ")]
        public string HTMLMarkupCode { get; set; }

        public string HeaderText { get; set; }
        public string HeaderFColor { get; set; }
        public string HeaderBColor { get; set; }
        public string LogoURL { get; set; }
        public string FooterFColor { get; set; }
        public string FooterText { get; set; }
        public string FooterBColor { get; set; }
        public string BodyText { get; set; }
        public string BodyFColor { get; set; }
        public string BodyBColor { get; set; }
    }

---

将onsubmit添加到表单中：

<script type="text/javascript">
    $(function () {
        $('#DropDownListForId').change(function () {
            $('form#myForm').submit();
        });
    });
</script>

<div class="container" style="padding-top: 20px;">
    @Html.LabelFor(x => x.CurrentPub)
    @Html.TextBoxFor(x => x.CurrentPub)
    <br/>
    <br/>
    <div class="form-holder">
        @using (Html.BeginForm(null, null, FormMethod.Post, new {id = "myForm"}))
        {
            <div class="row">
                <div class="col-xs-6">
                    <label>UI Element:</label>
                    @Html.DropDownListFor(m => m.SelectedUIItem, Model.UIItems, new {@id = "DropDownListForId"})
                </div>
                <div class="col-xs-6">
                    @Html.LabelFor(m => m.UseWholeMarkup)
                    @Html.CheckBoxFor(m => m.UseWholeMarkup)
                </div>
            </div>
        }
        <div class="row">
            <div class="col-xs-9">
                @Html.LabelFor(m =>  m.HTMLMarkupCode)
                @Html.TextAreaFor(m => m.HTMLMarkupCode, new { rows = "10", cols = "100" })
            </div>

        </div>
        <div class="row">
            <button class="btn btn-default" type="submit">Submit</button>
        </div>
    </div>
</div> 

@using (Html.BeginForm(null, null, FormMethod.Post, new {id = "myForm", onsubmit="return CheckForm()}))

然后添加一个javascript函数，查看是否已填写所有内容：

function CheckForm() {
    var ret = true;
    if (document.getElementById("DropDownListForId").selectedIndex == 0) {
        ret = false;
    }
    // Add whatever other logic or checks you need
    return ret;
}

---

简言之，听起来你想要一个下拉列表或选择的正常行为。所以删除javascript，它就会像你期望的那样工作，不是吗

至于评论获取值和文本。你没有告诉我们你想在哪里显示这个。光有时间是不够的。请尝试使用此javascript，或许您可以根据需要进行编辑：

<script type="text/javascript">
$(function () {
        $('#DropDownListForId').change(function () {
            alert('This is the selected value: ' + $(this).val() + ' and text: ' + $("option:selected", $(this)).text());
            //this should, hopefully, update the label with the current selected text. I doubt this is wanted, but it shows what could be done.
            $(this).parent().find('label').html($("option:selected", $(this)).text());
        });
    });
</script>

---

它现在正在做这种行为。JavaScript函数是一个提交表单的OnChange处理程序。我可以在不提交表单的情况下完成它吗？好的。您是否有一个DIV或要显示列表已更改的内容？您希望在更改事件中实际执行什么操作？显示一条消息？只需更改DropDownList框中的值并停留在表单上即可。用户仍需填写TextArea值。您告诉浏览器在更改时提交表单，然后询问我们如何停止此操作：删除提交表单的行：$'formmyForm'。提交；我不明白你想做什么。当您选择一个选项时，该值会更改，那么您为什么要处理更改事件以更改其本身呢？剧本的目的是什么？我知道我很困惑。根据下拉列表中选择的值，我想更改之前可能显示的内容。脚本错误。我希望获得所选项目的值，并在用户提交表单之前可能更改其下方显示的内容。