javascript - Change JQuery ui select option with a button -
javascript - Change JQuery ui select option with a button -
here working version of code far. trying accomplish alter selection of jquery dropdown select combobox using separate button called "next".
the result is: every time press "next" button jquery dropdown should alter automatically next selection.
so if have selected q2 dropdown combobox, , press "next" button dropdown menu automatically alter , select q3 , alert me ui.item.value.
i hope making sense. functionality useful because if have many questions easier press button , move on next selection.
i have written function called "next" don't know set in there. have tried various things nil seems work.
<!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 text within dropdown box*/ } .custom-combobox { position: absolute; display: inline-block; /*top: 20px;*/ /*position of command box*/ /* left:224px; controld combobox left right*/ } .custom-combobox-toggle { position: absolute; top: 0px; /* controls height of arrow box*/ bottom: 0; margin-left: -1px; padding: 0; /* support: ie7 */ *height: 1.7em; *top: 0.1em; } /*controls width of 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 together padding business relationship 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 dropdownbutton , _createautocomplete: function() { var selected = this.element.children( ":selected" ), value = selected.val() ? selected.text() : "please select 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 attribute of code allow me alter menu button colour see css above .tooltip() .appendto( this.wrapper ) .button({ icons: { primary: "ui-icon-triangle-1-s" //you can alter icon original 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 visible if ( wasopen ) { return; } // pass empty string value search for, displaying 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 = $( ).text(); if ( this.value && ( !request.term || matcher.test(text) ) ) homecoming { label: text, value: text, option: }; }) ); }, _removeifinvalid: function( event, ui ) { // selected item, nil if ( ui.item ) { return; } // search match (case-insensitive) var value = this.input.val(), valuelowercase = value.tolowercase(), valid = false; this.element.children( "option" ).each(function() { if ( $( ).text().tolowercase() === valuelowercase ) { this.selected = valid = true; homecoming false; } }); // found match, nil if ( valid ) { return; } // remove invalid value this.input .val( "" ) .attr( "title", value + " didn't match 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 value of dropdownbox eveytime select question } } ); function next(){ //i fire function changes dropdown box selection next selection when click button. //i can simple select statement not work when using jquery ui. //there fiddle found doing similar can't work ui. http://jsfiddle.net/gn3ke/ } </script> </body> </html>
ok after much searching , lot of trial , error found own solution! having next button useful when have many questions in dropdown combobox ui. it's not efficient solution plenty work around!
here code needed next function work:
function next() { $('#dropdown').combobox("destroy");//first destroy current jquery combobox $("#dropdown option:selected").removeattr("selected"); //deselect selected alternative document.getelementbyid("dropdown").selectedindex = 3; //now jquery combobox destroyed , selected attribute deselected, add together new attribute, in underlying select statement. have set static value 'q3' illustration process can automated every time next pressed rolls on next question. $('#dropdown').combobox(); // recreate nice jquery combobox , phone call it. //finally, phone call jquery combobox select event, ui user can select questions dropdown box calling combobox not reactivate ui select function. $("#dropdown").combobox({ select: function (event, ui) { alert(ui.item.value); //this alert when question selected dropdown box again. } } ); alert(document.getelementbyid("dropdown").value); //this alerts next button. } javascript jquery html combobox
Comments
Post a Comment