JQuery ड्रॉपडाउन मान onchange घटना कैसे प्राप्त करें

Question

मैंने दो jQuery UI ड्रॉपडाउन स्वतः पूर्ण स्क्रिप्ट को जोड़ा है। अब मैं दूसरी ड्रॉपडाउन के दोनों मूल्य ऑनचेंज प्राप्त करना चाहता हूं और चर में अलग से स्टोर करना चाहता हूं। यह कैसे संभव है?

कोई विचार या सुझाव? धन्यवाद।

माई फिडल: नमूना

मेरा जेएस कोड:

(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;
            });
        });

मेरा 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>

Comments

यह आप पहले से ही ऐसा करने की कोशिश की है, लेकिन आप प्राप्त करने के लिए दूसरा मान चूक लगता $("#drop").change(function () { var first = $('#pick').val(); var second = $(this).val(); console.log(first, second); }); JSFiddle चर scoping से सावधान रहें।

— प्रवीण

हल: संदर्भ stackoverflow.com/a/12517292/4425004

— प्राणेश

Answer 1

ऐसे में कोशिश करें

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

Answer 2

$('#drop').change(
    function() {
        var val1 = $('#pick option:selected').val();
        var val2 = $('#drop option:selected').val();

        // Do something with val1 and val2 ...
    }
);

Answer 3

यदि आपके पास सरल ड्रॉपडाउन है जैसे:

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

तब आप मूल्य प्राप्त करने के लिए इस कोड का उपयोग कर सकते हैं:

$(function(){

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

});

Answer 4

इस कोड को जोड़ने का प्रयास करें।

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