到目前为止，这是我的代码的工作版本。我想要实现的是使用一个名为“next”的单独按钮更改JQuery下拉选择组合框的选择。
我想要的结果是：每次按下“下一步”按钮，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>
答案 0 :(得分：0)
好的经过大量的搜索和大量的反复试验，我找到了自己的解决方案！有一个下一个按钮是非常有用的，尤其是当您在下拉组合框中有很多问题时。它可能不是最有效的解决方案，但足够好的解决方法！
以下是下一个工作所需的代码：
function next()
{
$('#dropdown').combobox("destroy");//first destroy the current JQuery combobox
$("#dropdown option:selected").removeAttr("selected"); //deselect the currently selected option
document.getElementById("dropdown").selectedIndex = 3; //now that the JQuery combobox is destroyed and currently selected attribute is deselected, add a new attribute, in the underlying select statement. I have put this as a static value 'Q3' just as an example but this process can also be fully automated so that every time next is pressed it rolls over to the next question.
$('#dropdown').combobox(); // Now recreate the nice JQuery combobox and call it.
//Finally, call the JQuery combobox select event, ui so that the user can select questions from the dropdown box as simply calling the combobox does not reactivate the ui select function.
$("#dropdown").combobox({
select: function (event, ui) {
alert(ui.item.value); //this will alert when a question is selected from the dropdown box again.
}
}
);
alert(document.getElementById("dropdown").value); //this alerts to next button.
}