Question

我正在尝试使用Jquery UI代码来创建一个下拉框。 我很难理解如何放入onchange事件监听器，以便：

（a）下拉框的值传递给名为“x”且

的变量

（b）将值传递给显示所选值的警报功能。

我尝试过使用Jquery的简单选择框，它运行正常。但是，我无法使用更复杂的代码。有一个类似的线程已经回答了，但我仍然无法使用我在下面使用的ui代码。感谢任何帮助，也许把它放在Fiddle上？

   <!DOCTYPE html>

   <html>
       <head>
    <title>JQ onchange alert</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>


   <style type="text/css">

    .ui-widget {
       font-size: 18px;

    }
    #combobox{
        width: 300px;
    }

     .custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-left: -1px;
    padding: 0;
    /* support: IE7 */
    *height: 1.7em;
    *top: 0.1em;
    }
.custom-combobox-input {
    margin: 0;
    padding: 0.3em;
    }


.ui-autocomplete {
    max-height: 250px; /*Max height of scrollbar*/
    overflow-y: auto;   /* prevent horizontal scrollbar */
    overflow-x: hidden; /* add padding to account for vertical scrollbar */
    z-index:1000 !important;
}

</style>


    </head>
    <body>


<div >
    <label>Choose:</label>
    <select id="combobox" onchange="update()">
        <option value="">Select one...</option>
        <option value="Amsterdam">Amsterdam</option>
        <option value="London">London</option>
        <option value="Rome">Rome</option>
         <option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
    </select>
</div>


    <script>



    $(function() {
         $( "#combobox" ).combobox();
    });


    $( "#combobox" ).change(function() {
    alert( "COMBOBOX ITEM VALUE" );
    });



      (function( $ ) {$.widget( "custom.combobox", {
    _create: function() {this.wrapper = $( "<span>" )
            .addClass( "custom-combobox" )
            .insertAfter( this.element );
            this.element.hide();
            this._createAutocomplete();
            this._createShowAllButton();}
        ,

    _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
    value = selected.val() ? selected.text() : "";


    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" )
    .tooltip()
    .appendTo( this.wrapper )
    .button({
    icons: {
    primary: "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>

        </body>
            </html>

Answer 1

DEMO 获取值onchange事件。

代码：

 $(function() {

     $( "#combobox" ).selectmenu({
         change: function( event, ui ) {
             console.log(ui);
             var selected_value = ui.item.value;
             alert("You selected : "+selected_value);
         }
     });
});

请参阅文档here

<强> DEMO with your code !

jquery UI Combobox ONCHANGE无法正常工作

1 个答案: