valor trigger tag obtener item event con change jquery jquery-ui jquery-autocomplete jquery-ui-autocomplete

trigger - Cómo obtener el valor de jQuery dropdown onchange event



select tag events (4)

Agregue pruebe este código ... Su código de funcionamiento .......

<body> <?php if (isset($_POST[''nav''])) { header("Location: $_POST[nav]"); } ?> <form id="page-changer" action="" method="post"> <select name="nav"> <option value="">Go to page...</option> <option value="http://css-tricks.com/">CSS-Tricks</option> <option value="http://digwp.com/">Digging Into WordPress</option> <option value="http://quotesondesign.com/">Quotes on Design</option> </select> <input type="submit" value="Go" id="submit" /> </form> </body> </html>

<html> <head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> $(function() { $("#submit").hide(); $("#page-changer select").change(function() { window.location = $("#page-changer select option:selected").val(); }) }); </script> </head>

He agregado dos guiones jQuery UI Dropdown Autocomplete. Ahora quiero obtener ambos valores en el cambio del segundo menú desplegable y quiero almacenarlos por separado en la variable. ¿Como es posible?

Alguna idea o sugerencia? Gracias.

My Fiddle: Sample

Mi código JS:

(function($) { $.widget("ui.combobox", { _create: function() { var self = this, select = this.element.hide(), selected = select.children(":selected"), value = selected.val() ? selected.text() : ""; var input = this.input = $("<input>").insertAfter(select).val(value).autocomplete({ delay: 0, minLength: 0, source: function(request, response) { var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); response(select.children("option").map(function() { var text = $(this).text(); if (this.value && (!request.term || matcher.test(text))) return { label: text.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(request.term) + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"), value: text, option: this }; })); }, select: function(event, ui) { ui.item.option.selected = true; self._trigger("selected", event, { item: ui.item.option }); select.trigger("change"); }, change: function(event, ui) { if (!ui.item) { var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i"), valid = false; select.children("option").each(function() { if ($(this).text().match(matcher)) { this.selected = valid = true; return false; } }); if (!valid) { // remove invalid value, as it didn''t match anything $(this).val(""); select.val(""); input.data("autocomplete").term = ""; return false; } } } }).addClass("ui-widget ui-widget-content ui-corner-left"); input.data("autocomplete")._renderItem = function(ul, item) { return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul); }; this.button = $("<button type=''button''>&nbsp;</button>").attr("tabIndex", -1).attr("title", "Show All Items").insertAfter(input).button({ icons: { primary: "ui-icon-triangle-1-s" }, text: false }).removeClass("ui-corner-all").addClass("ui-corner-right ui-button-icon").click(function() { // close if already visible if (input.autocomplete("widget").is(":visible")) { input.autocomplete("close"); return; } // pass empty string as value to search for, displaying all results input.autocomplete("search", ""); input.focus(); }); }, destroy: function() { this.input.remove(); this.button.remove(); this.element.show(); $.Widget.prototype.destroy.call(this); } }); })(jQuery); $(function() { /*start point value*/ $("#pick").combobox({ change: function() { alert("changed"); } }); $("#toggle").click(function() { $("#pick").toggle(); }); $("#pick").change(function() { var start = this.value; }); /*end point value*/ $("#drop").combobox({ change: function() { alert("changed"); } }); $("#toggle").click(function() { $("#drop").toggle(); }); $("#drop").change(function() { var end = this.value; }); });

Mi código HTML:

<div class="ui-widget"> <select id="pick"> <option value="">Select one...</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <select id="drop"> <option value="">Select one...</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> </select> </div>


Intenta así

$("#drop").change(function () { var end = this.value; var firstDropVal = $(''#pick'').val(); });


Si tiene un menú desplegable simple como:

<select name="status" id="status"> <option value="1">Active</option> <option value="0">Inactive</option> </select>

Entonces puedes usar este código para obtener valor:

$(function(){ $("#status").change(function(){ var status = this.value; alert(status); if(status=="1") $("#icon_class, #background_class").hide();// hide multiple sections }); });


$(''#drop'').change( function() { var val1 = $(''#pick option:selected'').val(); var val2 = $(''#drop option:selected'').val(); // Do something with val1 and val2 ... } );