如何获取 jQuery 下拉值 onchange 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19922729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-27 00:49:21 来源:igfitidea点击:
How to get jQuery dropdown value onchange event
提问by Rajnikanth
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?
我添加了两个 jQuery UI 下拉自动完成脚本。现在我想获得第二个下拉菜单的两个值，并希望分别存储在变量中。怎么可能？
Any ideas or suggestions? Thanks.
有什么想法或建议吗？谢谢。
My Fiddle:Sample
我的小提琴：示例
My JS Code:
我的JS代码：
(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></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:
我的 HTML 代码：
<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>
回答by power_scriptor
Try like this
像这样尝试
$("#drop").change(function () {
var end = this.value;
var firstDropVal = $('#pick').val();
});
回答by Emanuel Saringan
$('#drop').change(
function() {
var val1 = $('#pick option:selected').val();
var val2 = $('#drop option:selected').val();
// Do something with val1 and val2 ...
}
);
回答by Muhammad Shahzad
If you have simple dropdown like:
如果您有简单的下拉菜单，例如：
<select name="status" id="status">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
Then you can use this code for getting value:
然后您可以使用此代码获取价值：
$(function(){
$("#status").change(function(){
var status = this.value;
alert(status);
if(status=="1")
$("#icon_class, #background_class").hide();// hide multiple sections
});
});
回答by Randhir Yadav
Add try this code .. Its working grt.......
添加试试这个代码..它的工作grt.......
<body>
<?php
if (isset($_POST['nav'])) {
header("Location: $_POST[nav]");
}
?>
<form id="page-changer" action="" method="post">
<select name="nav">
<option value="">Go to page...</option>
<option value="http://css-tricks.com/">CSS-Tricks</option>
<option value="http://digwp.com/">Digging Into WordPress</option>
<option value="http://quotesondesign.com/">Quotes on Design</option>
</select>
<input type="submit" value="Go" id="submit" />
</form>
</body>
</html><html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function() {
$("#submit").hide();
$("#page-changer select").change(function() {
window.location = $("#page-changer select option:selected").val();
})
});
</script>
</head>