我添加了两个 jQuery UI 下拉自动完成脚本。现在我想获取第二个下拉列表的更改值并希望单独存储在变量中。怎么可能？
有什么想法或建议吗？谢谢。
我的小提琴：示例
我的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>$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;
});
});
我的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>
尝试这样
$("#drop").change(function () {
var end = this.value;
var firstDropVal = $('#pick').val();
});
如果您有简单的下拉菜单，例如：
<select name="status" id="status">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
然后您可以使用此代码来获取价值：
$(function(){
$("#status").change(function(){
var status = this.value;
alert(status);
if(status=="1")
$("#icon_class, #background_class").hide();// hide multiple sections
});
});
$('#drop').change(
function() {
var val1 = $('#pick option:selected').val();
var val2 = $('#drop option:selected').val();
// Do something with val1 and val2 ...
}
);
添加尝试此代码..它的工作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>$('#select').change(function() {
var val = this.value;
// alert(val);
if (val == 'No') {
$('.disable-field').prop('disabled', true);
} else {
$('.disable-field').prop('disabled', false);
}
});
如果您想检测多个更改：
<select name="status" id="status">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
<select name="statusStopGo" id="anotherStatus">
<option value="2">Stop</option>
<option value="3">Go</option>
</select>
更改第一行，从。
$('#status').change(function() {
var val = this.value;
// alert(val);
if (val == 'No') {
$('.disable-field').prop('disabled', true);
} else {
$('.disable-field').prop('disabled', false);
}
});
至
$('#status, #anotherStatus').change(function() {
var val = this.value;
// alert(val);
if (val == 'No') {
$('.disable-field').prop('disabled', true);
} else {
$('.disable-field').prop('disabled', false);
}
});