-1
到目前为止，这是我的代码的工作版本。我想要实现的是使用名为“next”的单独按钮来更改JQuery下拉选择组合框的选择。用按钮更改JQuery UI选择选项
我想要的结果是：每次按下“下一步”按钮时，JQuery下拉列表会自动更改为下一个选择。
因此，如果我从下拉式组合框中选择Q2，然后按下“下一步”按钮，我希望下拉菜单自动更改并选择Q3并提醒我ui.item.value。
我希望这是有道理的。此功能非常有用，因为如果您有许多问题，则按下按钮并移到下一个选择上会更容易。
我已经写了一个叫做“next”的函数，但是我不知道该放什么。我尝试了各种各样的东西，但似乎没有任何工作。
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!--JQuery ref-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<style>
/*JQuery styleing*/
.ui-widget {
font-size: 18px;
font-family: sans-serif; /*styling for the text inside the dropdown box*/
}
.custom-combobox {
position: absolute;
display: inline-block;
/*top: 20px;*/ /*Position of the control box*/
/* left:224px; controld combobox left to right*/
}
.custom-combobox-toggle {
position: absolute;
top: 0px; /* controls the height of the arrow box*/
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
/*Controls the width of the inputbox*/
.custom-combobox-input {
margin: 0;
padding: 0.3em;
width: 700px;
/*color: red;*/
}
.ui-autocomplete {
max-height: 250px; /*Max height of scrollbar*/
max-width: 800px; /*Max width of items dropdown box */
overflow-y: auto; /* prevent horizontal scrollbar */
overflow-x: hidden; /* add padding to account for vertical scrollbar */
z-index:1000 !important;
}
</style>
<script>
(function($) {$.widget("custom.combobox", {
_create: function() {this.wrapper = $("<span>")
.addClass("custom-combobox")
.insertAfter(this.element);
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();}//creates the dropdownbutton
,
_createAutocomplete: function() {
var selected = this.element.children(":selected"),
value = selected.val() ? selected.text() : "Please select a question"; //adds default title in dropdownbox
this.input = $("<input>")
.appendTo(this.wrapper)
.val(value)
.attr("title", "")
.addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy(this, "_source")
})
.tooltip({
tooltipClass: "ui-state-highlight"});
this._on(this.input, {
autocompleteselect: function(event, ui) {
ui.item.option.selected = true;
this._trigger("select", event, {
item: ui.item.option});
}
,
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$("<a>")
.attr("tabIndex", -1)
.attr("title", "Show more")
.attr("id","dd") //I have added this attribute of code to allow me to change the menu button colour see css above
.tooltip()
.appendTo(this.wrapper)
.button({
icons: {
primary: "ui-icon-triangle-1-s" //You can change the icon from the original to anything else eg: ui-icon-triangle-1-s
},
text: false
})
.removeClass("ui-corner-all")
.addClass("custom-combobox-toggle ui-corner-right")
.mousedown(function() {
wasOpen = input.autocomplete("widget").is(":visible");
})
.click(function() {
input.focus();
// Close if already visible
if (wasOpen) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete("search", "");
});
},
_source: function(request, response) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
response(this.element.children("option").map(function() {
var text = $(this).text();
if (this.value && (!request.term || matcher.test(text)))
return {
label: text,
value: text,
option: this
};
}));
},
_removeIfInvalid: function(event, ui) {
// Selected an item, nothing to do
if (ui.item) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children("option").each(function() {
if ($(this).text().toLowerCase() === valueLowerCase) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if (valid) {
return;
}
// Remove invalid value
this.input
.val("")
.attr("title", value + " didn't match any item")
.tooltip("open");
this.element.val("");
this._delay(function() {
this.input.tooltip("close").attr("title", "");
}, 2500);
this.input.autocomplete("instance").term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})(jQuery);
</script>
</head>
<body>
<button id="next" onclick="next()">next</button>
<select id="dropdown">
<option value="" selected ="selected" disabled="disabled">Select question </option>
<option value = "Q1">Q1 </option>
<option value = "Q2">Q2 </option>
<option value = "Q3">Q3 </option>
<option value = "Q4">Q4 </option>
<option value = "Q5">Q5 </option>
</select>
<script type="text/javascript">
$("#dropdown").combobox({
select: function (event, ui) {
alert(ui.item.value);//gives me the value of the dropdownbox eveytime I select a question
}
}
);
function next(){
//I would like to fire a function that changes the dropdown box selection to the next selection when I click a button.
//I can do this with a simple select statement but does not work when I am using a JQuery ui.
//there is a fiddle which I found doing something similar but I can't get it to work with the ui. http://jsfiddle.net/gN3ke/
}
</script>
</body>
</html>
“jQuery用户界面选择” ..？你能链接到你正在使用的插件..？ – 2014-11-01 10:45:43
这是我使用的插件，谢谢.http：//jqueryui.com/autocomplete/#combobox看看源代码。不知道为什么有人击倒我的问题 – user2259146 2014-11-01 14:33:10
@可能是因为你没有提到你正在使用的东西。您实际上使用* autocomplete *小部件的自定义版本，除非您明确提及它，否则任何人都不会明白您在说什么...... – 2014-11-01 15:03:59