[英]Change the drop down option based on the selected option from other combobox
[英]Change jquerUI Combobox Selected option
我想从组合框jqueryUI中选择一个值,但它不起作用,该怎么办呢?我想检查txtId HiddenField是否具有value:更改组合框的选定值。我这样写:
if($("#txtId").val())
{
//change selected combobox value with textId value
}
这是我的脚本和html(我删除样式以免混淆)
<script>
(function ($) {
$.widget("custom.combobox_with_optgroup", {
_create: function () {
$.extend($.ui.menu.prototype.options, {
items: "> :not(.aureltime-autocomplete-category)"
});
this.wrapper = $("<span>")
.addClass("aureltime-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function () {
var selected = this.element.find(":selected"),
value = selected.val() ? selected.text() : "";
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("aureltime-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 300,
autoFocus: true,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on(this.input, {
autocompleteselect: function (event, ui) {
//event . preventDefault() ;
ui.item.value = ui.item.labelOriginal;
//alert( ui.item.option.value + " " + ui.item.option.labelOriginal );
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option
});
},
autocompletefocus: function (event, ui) {
ui.item.value = ui.item.labelOriginal;
},
autocompletechange: "_removeIfInvalid"
});
this.input.data("ui-autocomplete")._renderMenu = function (ul, items) {
var self = this,
currentCategory = "";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
if (item.category) {
ul.append("<li class='aureltime-autocomplete-category'>" + item.category + "</li>");
}
currentCategory = item.category;
}
self._renderItemData(ul, item);
});
};
this.input.data("ui-autocomplete")._renderItem = function (ul, item) {
var attr = { class: item.class };
if (item.title) attr.title = item.title;
return $("<li>", attr).html(item.label).appendTo(ul);
};
},
_createShowAllButton: function () {
var input = this.input,
wasOpen = false;
$("<a>", { tabIndex: -1, title: "انتخاب نمایید" })
.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass("ui-corner-all")
.addClass("aureltime-combobox-toggle ui-corner-right")
.mousedown(function () {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function () {
input.focus();
if (wasOpen) {
return;
}
input.autocomplete("search", "");
});
},
_source: function (request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.find("option").map(function () {
var $this = $(this),
text = $this.text(),
category = $this.closest("optgroup").attr("label") || "",
regexTerm = $.ui.autocomplete.escapeRegex(request.term);
if (this.value && (!request.term || matcher.test(text) || matcher.test(category))) {
var retour =
{
labelOriginal: text,
label: !request.term ? text : text.replace(
new RegExp(
"(?![^&;]+;)(?!<[^<>]*)(" +
regexTerm +
")(?![^<>]*>)(?![^&;]+;)", "gi"
), "<strong>$1</strong>"),
value: this.value,
class: $this.attr("class"),
option: this,
category: category.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + regexTerm + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>")
};
var title = $this.attr("title");
if (title) retour.title = title;
return retour;
}
}));
},
_removeIfInvalid: function (event, ui) {
if (ui.item) {
//alert( ui.item.labelOriginal + " found" );
return;
}
//alert("ear");
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
//matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i"),
valid = false;
this.element.find("option").each(function () {
//if ($(this).text().match(matcher)) {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
if (valid) {
return;
}
this.input
.val("")
.attr("title", value + " non trouvé")
.tooltip("open");
this.element.val("");
this._delay(function () {
this.input.tooltip("close").attr("title", "");
}, 12500);
this.input.data("ui-autocomplete").term = "";
},
_destroy: function () {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
$(function () {
$("#combobox").combobox_with_optgroup();
});
</script>
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Tkh_Breath.aspx/GetGenders",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#combobox").get(0).options.length = 0;
$("#combobox").get(0).options[$("#combobox").get(0).options.length] = new Option("انتخاب نمایید", "");
$.each(msg.d, function (index, item) {
$("#combobox").get(0).options[$("#combobox").get(0).options.length] = new Option(item.Display, item.Value);
});
},
error: function (xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
});
});
</script>
'///////////////////////////////////// HTml
<select id="combobox" name="combobox" plaholder=" " data-type="cape">
</select>
<asp:HiddenField ID="txtId" runat="server" />
只需在隐藏字段中添加onChange列表器,然后更新该事件的组合框值即可。
像这样的东西:
html:
<select id="combobox" name="combobox" plaholder=" " data-type="cape"></select>
<asp:HiddenField ID="txtId" runat="server" />
script:
$(document).ready(function(){
$("#txtId").change(function(){
//update select box value here
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.