如何获取 jQuery 下拉值 onchange 事件 [英] How to get jQuery dropdown value onchange event
本文介绍了如何获取 jQuery 下拉值 onchange 事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我添加了两个 jQuery UI 下拉自动完成脚本.现在我想获得第二个下拉菜单的两个值，并想分别存储在变量中.怎么可能?
有什么想法或建议吗?谢谢.
我的小提琴: 示例
我的 JS 代码:
(function($) {$.widget("ui.combobox", {_创建:函数(){var self = this,选择 = this.element.hide(),selected = select.children(":selected"),值 = selected.val() ?selected.text() : "";var input = this.input = $("").insertAfter(select).val(value).autocomplete({延迟:0，最小长度:0，来源:功能(请求，响应){var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");响应(选择.孩子(选项").地图(功能(){var text = $(this).text();if (this.value && (!request.term || matcher.test(text)))返回 {标签: text.replace(new RegExp("(?![^&]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&]+;)", "gi"), "<strong>$1</strong>"),值:文本，选项:这个};}));},选择:功能(事件，用户界面){ui.item.option.selected = true;self._trigger(选择"，事件，{项目:ui.item.option});select.trigger("改变");},更改:函数(事件，用户界面){如果(！ui.item){var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"),有效 = 假；select.children("option").each(function() {如果 ($(this).text().match(matcher)) {this.selected = 有效 = 真；返回假；}});如果(！有效){//删除无效值，因为它不匹配任何内容$(this).val("");select.val("");input.data("自动完成").term = "";返回假；}}}}).addClass("ui-widget ui-widget-content ui-corner-left");input.data("自动完成")._renderItem = function(ul, item) {return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);};this.button = $("<button type='button'> </button>").attr("tabIndex", -1).attr("title", "显示所有项目").insertAfter(input).button({图标:{主要:ui-icon-triangle-1-s"},文字:假}).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function() {//如果已经可见则关闭if (input.autocomplete("widget").is(":visible")) {input.autocomplete("关闭");返回;}//传递空字符串作为值进行搜索，显示所有结果input.autocomplete("搜索", "");输入焦点()；});},销毁:函数(){this.input.remove();this.button.remove();this.element.show();$.Widget.prototype.destroy.call(this);}});})(jQuery);$(函数(){/*起始点值*/$("#pick").combobox({改变:函数(){警报(改变")；}});$("#toggle").click(function() {$("#pick").toggle();});$("#pick").change(function() {var start = this.value;});/*终点值*/$("#drop").combobox({改变:函数(){警报(改变")；}});$("#toggle").click(function() {$("#drop").toggle();});$("#drop").change(function() {var end = this.value;});});我的 HTML 代码:
解决方案
试试这个
$("#drop").change(function () {var end = this.value;var firstDropVal = $('#pick').val();});I have added two jQuery UI Dropdown Autocomplete script. Now I want get both value onchange of second dropdown and want to store separately in variable. How it is possible?
Any ideas or suggestions? Thanks.
My Fiddle: Sample
My JS Code:
(function($) {
$.widget("ui.combobox", {
_create: function() {
var self = this,
select = this.element.hide(),
selected = select.children(":selected"),
value = selected.val() ? selected.text() : "";
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
});
select.trigger("change");
},
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) {
// remove invalid value, as it didn't match anything
$(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'> </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() {
// close if already visible
if (input.autocomplete("widget").is(":visible")) {
input.autocomplete("close");
return;
}
// pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
input.focus();
});
},
destroy: function() {
this.input.remove();
this.button.remove();
this.element.show();
$.Widget.prototype.destroy.call(this);
}
});
})(jQuery);
$(function() {
/*start point value*/
$("#pick").combobox({
change: function() {
alert("changed");
}
});
$("#toggle").click(function() {
$("#pick").toggle();
});
$("#pick").change(function() {
var start = this.value;
});
/*end point value*/
$("#drop").combobox({
change: function() {
alert("changed");
}
});
$("#toggle").click(function() {
$("#drop").toggle();
});
$("#drop").change(function() {
var end = this.value;
});
});
My HTML Code:
<div class="ui-widget">
<select id="pick">
<option value="">Select one...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="drop">
<option value="">Select one...</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
</select>
</div>
解决方案
Try like this
$("#drop").change(function () {
var end = this.value;
var firstDropVal = $('#pick').val();
});
这篇关于如何获取 jQuery 下拉值 onchange 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
