用按钮更改JQuery-ui-select选项

Change JQuery ui select option with a button

本文关键字：JQuery-ui-select 选项按钮更新时间：2023-09-26

这是迄今为止我的代码的工作版本。我试图实现的是使用一个名为"下一步"的单独按钮来更改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>

好的，经过多次搜索和尝试，我找到了自己的解决方案！有一个下一个按钮非常有用，尤其是当你在下拉组合框ui中有很多问题时。这可能不是最有效的解决方案，但却是一个足够好的解决方案！

这是我需要的下一个功能的代码：

 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.
 }