通过下拉组合框的值使用JSON自动填充用户窗体 [英] Pass Dropdown combobox value with Json auto filling userform

问题描述

我有一个下拉/组合框，这是制造的原理

I have a dropdown/combo box, this is how its made

 @Html.DropDownList("combobox", Model.Sizes, "--select--")

它使用一个jQuery UI控件，它是，

It uses a jquery ui widget which is,

   <script>
    (function ($) {
        $.widget("custom.combobox", {
            _create: function () {
                this.wrapper = $("<span>")
                  .addClass("custom-combobox")
                  .insertAfter(this.element);

                this.element.hide();
                this._createAutocomplete();
                this._createShowAllButton();
            },

            _createAutocomplete: function () {
                var selected = this.element.children(":selected"),
                  value = selected.val() ? selected.text() : "";

                this.input = $("<input>")
                  .appendTo(this.wrapper)
                  .val(value)
                  .attr("title", "")
                  .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
                  .autocomplete({
                      delay: 0,
                      minLength: 0,
                      source: $.proxy(this, "_source"),
//ADDED HERE
                      select: function(event, ui) { 
                    sizeID=ui.item.id; 
                }
                  })
                  .tooltip({
                      tooltipClass: "ui-state-highlight"
                  });

                this._on(this.input, {
                    autocompleteselect: function (event, ui) {
                        ui.item.option.selected = true;
                        this._trigger("select", event, {
                            item: ui.item.option
                        });
                    },

                    autocompletechange: "_removeIfInvalid"
                });
            },

            _createShowAllButton: function () {
                var input = this.input,
                  wasOpen = false;

                $("<a>")
                  .attr("tabIndex", -1)
                  .attr("title", "Show All Items")
                  .tooltip()
                  .appendTo(this.wrapper)
                  .button({
                      icons: {
                          primary: "ui-icon-triangle-1-s"
                      },
                      text: false
                  })
                  .removeClass("ui-corner-all")
                  .addClass("custom-combobox-toggle ui-corner-right")
                  .mousedown(function () {
                      wasOpen = input.autocomplete("widget").is(":visible");
                  })
                  .click(function () {
                      input.focus();

                      // Close if already visible
                      if (wasOpen) {
                          return;
                      }

                      // Pass empty string as value to search for, displaying all results
                      input.autocomplete("search", "");
                  });
            },

            _source: function (request, response) {
                var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                response(this.element.children("option").map(function () {
                    var text = $(this).text();
                    if (this.value && (!request.term || matcher.test(text)))
                        return {
                            label: text,
                            value: text,
                            option: this
                        };
                }));
            },

            _removeIfInvalid: function (event, ui) {

                // Selected an item, nothing to do
                if (ui.item) {
                    return;
                }

                // Search for a match (case-insensitive)
                var value = this.input.val(),
                  valueLowerCase = value.toLowerCase(),
                  valid = false;
                this.element.children("option").each(function () {
                    if ($(this).text().toLowerCase() === valueLowerCase) {
                        this.selected = valid = true;
                        return false;
                    }
                });

                // Found a match, nothing to do
                if (valid) {
                    return;
                }

                // Remove invalid value
                this.input
                  .val("")
                  .attr("title", value + " didn't match any item")
                  .tooltip("open");
                this.element.val("");
                this._delay(function () {
                    this.input.tooltip("close").attr("title", "");
                }, 2500);
                this.input.autocomplete("instance").term = "";
            },

            _destroy: function () {
                this.wrapper.remove();
                this.element.show();
            }
        });
    })(jQuery);

    $(function () {
        $("#combobox").combobox();
        $("#toggle").click(function () {
            $("#combobox").toggle();
        });
    });
</script>

然后我正在试图通过使用JSON likeeee此下拉列表的值

I then am trying to pass the value of this dropdown using Json likeeee

<script type="text/javascript">
        $(function () {
            $("[name='combobox']").change(function () {

                $.getJSON('@Url.Action("GetSize")', { sizeID: $("[name='combobox']").val() }, function (Size) {
                    // Fill the fields according to the Jsondata we requested

                    $("#KID").val(Size["KammID"]);

本使用在我的控制器的get大小的动作是，

This uses the get size action in my controller which is,

    public JsonResult GetSize(int sizeID)
    {
        var Size = db.AllSizes.Find(sizeID);
        return Json(Size, JsonRequestBehavior.AllowGet);
    }

Andddddd这个工作完全符合我正常的下拉列表中，但一旦我把它改成一个组合框似乎它没有得到sizeID，

Andddddd this worked perfectly with my normal dropdown, but once i changed it to a combo box it seems its not getting the sizeID,

HELP BENJI

HELP BENJI

推荐答案

您可以在选择功能添加如下所述：
jQuery的自动完成

you could add in a select function as outlined here: Get value in jquery autocomplete

所以，当一个选项被选中，你存储在一个变量的值。

so when an option is selected you store the value in a variable.

例如：

var sizeID;
.autocomplete({
                          delay: 0,
                          minLength: 0,
                          source: $.proxy(this, "_source"),
                          select: function(event, ui) { 
                               sizeID=ui.item.id; 
                               }
                      })

这篇关于通过下拉组合框的值使用JSON自动填充用户窗体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！