কীভাবে jQuery ড্রপডাউন মান অনিঙ্ক ইভেন্টে পাবেন

Question

আমি দুটি jQuery ইউআই ড্রপডাউন স্বতঃসম্পূর্ণ স্ক্রিপ্ট যুক্ত করেছি। এখন আমি দ্বিতীয় ড্রপডাউন উভয়েরই মান পরিবর্তন করতে চাই এবং ভেরিয়েবলে আলাদাভাবে সঞ্চয় করতে চাই। কিভাবে সম্ভব?

কোন ধারণা বা পরামর্শ? ধন্যবাদ

আমার ফিডল: নমুনা

আমার জেএস কোড:

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

আমার এইচটিএমএল কোড:

<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); }); জেএসফিডাল পেতে ভুলে গেছেন ভেরিয়েবল স্কোপিং সম্পর্কে সতর্ক হন।

— প্রবীণ

সমাধান: পড়ুন stackoverflow.com/a/12517292/4425004

— Pranesh Janarthanan

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>