this might sound stupid question, i'm trying pix past...i don't know how many hours. have jquery combobox here.
combobox code :-
<script> (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 items" ) .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 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) ) ) return { label: text, value: text, option: }; }) ); }, _removeifinvalid: function( event, ui ) { // selected item, nothing 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; return false; } }); // found match, nothing 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 ); $(function() { $( "#combobox" ).combobox(); $( "#toggle" ).click(function() { $( "#combobox" ).toggle(); }); }); </script> </head> <select name="combobox" id="combobox" class="combobox"> <option value=""></option> <?php try { $s = $conn->query("select * testing2"); } catch(pdoexception $e) { echo $e->getmessage(); } while($test = $s->fetch(pdo::fetch_obj)) { ?> <option value="<?php echo $test->indexid; ?>"><?php echo $test->v1; ?></option> <?php } ?> </select> i'm trying value of select value selected box, i'm unable :- here's code i've written :-
<script type="text/javascript"> $('#combobox').change(function(){ var val = $("#combobox").val(); alert(val); }) </script> but, doesn't executes. wrong doing here?
here's view-source of combobox :-
<select name="combobox" id="combobox" class="combobox"> <option value=""></option> <option value="1">value1</option> <option value="2">lovalue1</option> </select>
i guess have issue around here. line 125:
this.element.children( "option" ).each(function() { if ( $( ).text().tolowercase() === valuelowercase ) { $(this).prop("selected", true); valid = true; return false; } }); i go solution tested. so, request use select2 these kind of stuff. have @ following snippet:
$(function () { $("#akshay").select2({ "placeholder": "someplaceholder", "width": 200 }); }); $("#akshay").change(function(){ alert($(this).val()); });<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" /> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.full.min.js"></script> <select name="" id="akshay"> <option value="item-1">value</option> <option value="item-2">item 2</option> <option value="item-3">item 3</option> <option value="item-4">item 4</option> <option value="item-5">item 5</option> <option value="item-6">item 6</option> <option value="item-7">item 7</option> <option value="item-8">item 8</option> <option value="item-9">item 9</option> <option value="item-10">item 10</option> <option value="item-11">item 11</option> <option value="item-12">item 12</option> <option value="item-13">item 13</option> <option value="item-14">item 14</option> <option value="item-15">item 15</option> </select>
Comments
Post a Comment