Question

大家好我一直在使用jquery自动完成组合框，一切正常，直到我必须以编程方式更改下拉列表的索引。

似乎我必须修改此

select: function (event, ui) {
                ui.item.option.selected = true;
                self._trigger("selected", event, {
                    item: ui.item.option
                });

允许我通过代码更新索引，但我不知道如何做到这一点，有人可以帮助我如何实现这一点。非常感激任何的帮助。组合框代码显示在这里。 http://jqueryui.com/autocomplete/#combobox 提前感谢你们提供的任何帮助。

我尝试了几种不同的方式，只有当我回到非jquery解决方案时它才有效。

        $("#StartLocations").val( $("#EndLocations option:selected").val());
        $("#EndLocations").prop("selectedIndex", 1);
        $("#EndLocations").val(1);

：更新

   function RunDirBtn_onclick(r){
        if (r == 'Y') {
            index = EndLocations.selectedIndex;
            StartNode = MystartingLocation[index].locNode;

            index = StartLocations.selectedIndex;
            EndNode = MystartingLocation[index].locNode;

          //  $("#StartLocations").val( $("#EndLocations option:selected").val());
           // $("#EndLocations").prop("selectedIndex", 1);
           // $("#EndLocations").val(1);
            var startint = $("#StartLocations").attr("selectedIndex");
            var endint = $("#EndLocations").attr("selectedIndex");

            $("#EndLocations").attr("selectedIndex", startint);
            $("#StartLocations").attr("selectedIndex", endint);

        } else {
            index = EndLocations.selectedIndex;
            EndNode = MystartingLocation[index].locNode;

            index = StartLocations.selectedIndex;
            StartNode = MystartingLocation[index].locNode;
        }

我可以更改每个dropdpown的索引我唯一的问题是我无法使用自动完成组合框。组合框代码

$.widget("ui.combobox", {
    _create: function () {
        var self = this,
            select = this.element.hide(),
            selected = select.children(":selected"),
            value = selected.val() ? selected.text() : "Select One...";
        var input = this.input = $("<input>")
            .insertAfter(select)
            .val(value)
            .autocomplete({
                delay: 0,
                minLength: 0,
                source: function (request, response) {
                    var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                    response(select.children("option").map(function () {
                        var text = $(this).text();
                        if (this.value && (!request.term || matcher.test(text)))
                            return {
                                label: text.replace(
                                    new RegExp(
                                        "(?![^&;]+;)(?!<[^<>]*)(" +
                                        $.ui.autocomplete.escapeRegex(request.term) +
                                        ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                    ), "<strong>$1</strong>"),
                                value: text,
                                option: this
                            };
                    }));
                },
                select: function (event, ui) {
                    ui.item.option.selected = true;
                    self._trigger("selected", event, {
                        item: ui.item.option
                    });
                },
                change: function (event, ui) {
                    if (!ui.item) {
                        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),
                            valid = false;
                        select.children("option").each(function () {
                            if ($(this).text().match(matcher)) {
                                this.selected = valid = true;
                                return false;
                            }
                        });
                        if (!valid) {
                            $(this).val("");
                            select.val("");
                            input.data("autocomplete").term = "";
                            return false;
                        }
                    }
                }
            })
            .addClass("ui-widget ui-widget-content ui-corner-left");

        input.data("autocomplete")._renderItem = function (ul, item) {
            return $("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);
        };

        this.button = $("<button type='button'>&nbsp;</button>")
            .attr("tabIndex", -1)
            .attr("title", "Show All Items")
            .insertAfter(input)
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
            .removeClass("ui-corner-all")
            .addClass("ui-corner-right ui-button-icon")
            .click(function () {
                if (input.autocomplete("widget").is(":visible")) {
                    input.autocomplete("close");
                    return;
                }

                $(this).blur();
                input.autocomplete("search", "");
                input.focus();
            });
    },

    destroy: function () {
        this.input.remove();
        this.button.remove();
        this.element.show();
        $.Widget.prototype.destroy.call(this);
    }
});

Answer 1

我认为问题是自动完成组合框没有“selectedIndex”的任何属性。

如果您想实现这一目标，可能需要将该属性添加到自动填充：

var startint = $("#StartLocations").attr("selectedIndex");
var endint = $("#EndLocations").attr("selectedIndex");

$("#EndLocations").attr("selectedIndex", startint);
$("#StartLocations").attr("selectedIndex", endint);

Answer 2

看了一遍又一遍，我从这里得到了答案 How to define selected value for jQuery UI combobox? 虽然我无法直接更改自动完成的值，但我只需更新输入框的值，在幕后即可引用选择组件。感谢您的回复。

jquery组合框更新索引通过代码不更新组合框

2 个答案: