jQuery ক্লিক করুন onChange মান পেতে

Question

আমি মনে করেছিলাম যে এটি করে আমি একটি সিলেক্ট ইনপুটটির মান পেতে পারি $(this).val();onchange এটি করে এবং নির্বাচিত ক্ষেত্রে পরামিতি প্রয়োগ করে ।

আমি আইডির রেফারেন্স দিলেই এটি কাজ করবে।

এটি কীভাবে এটি ব্যবহার করে করব।

Answer 1

এটা চেষ্টা কর-

$('select').on('change', function() {
  alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

আপনি অনুরুপ ইভেন্টের সাথে উল্লেখ করতে পারেন-

function getval(sel)
{
    alert(sel.value);
}

<select onchange="getval(this);">
    <option value="1">One</option>
    <option value="2">Two</option>
</select>

Comments

আমি জানি এটি বেশ দেরি হয়ে গেছে তবে আপনি যদি কোনও ফর্ম নেভিগেট করতে কীবোর্ড (ট্যাবিং) ব্যবহার করছেন এবং ড্রপডাউন তালিকা থেকে বেছে নেওয়ার জন্য উপরে / নীচে তীরগুলি ব্যবহার করছেন তবে ফায়ারফক্স (২২.০) পরিবর্তন ইভেন্টটি ট্রিগার করবে না। ফায়ারফক্সের জন্য আপনাকে কীপ্রেস পাশাপাশি যুক্ত করতে হবে। অতিরিক্ত তথ্য: jQuery 1.10.2 synt ('নির্বাচন করুন') সিনট্যাক্স ব্যবহার করে। ('পরিবর্তন', ফাংশন () {/ * ডু সিওমিং * /}) ব্যবহার করে;

— MonkeyZeus

আমার জন্য Mhh, jQuery উদাহরণ কাজ করে না, এবং আমি নিশ্চিত যে আমার পৃষ্ঠায় 1.11 jQuery ফাইলটি সঠিকভাবে লোড পেয়েছি। আমার ব্রাউজারের জেএস লগগুলিতে, আমি এটি পেয়েছি: কোনও পদ্ধতি নেই 'চালু'। আমি এটি ফায়ারফক্স এবং ক্রোম উভয় ক্ষেত্রেই চেষ্টা করেছি। এটি কি স্ট্যান্ডার্ড ব্যবহার বা এটি কেবলমাত্র নতুন jquery সংস্করণে প্রয়োগ করা হয়েছিল? উত্তরের জন্য thx

— অ্যালেক্স

@ মোনকিজেস আপনার প্রয়োজন নেই, উপাদানটি ফোকাস হারিয়ে ফেললে এটি ট্রিগার হবে। (JQuery চেঞ্জ পদ্ধতি) থেকে [ api.jquery.com/change/] "নির্বাচিত বাক্স, চেকবক্স এবং রেডিও বোতামগুলির জন্য, ব্যবহারকারী মাউস দিয়ে একটি নির্বাচন করার সময় ইভেন্টটি তাত্ক্ষণিকভাবে বরখাস্ত করা হয়, তবে অন্যান্য উপাদানগুলির জন্য ইভেন্টটি টাইপ করে উপাদান ফোকাস হারানো পর্যন্ত স্থগিত করা হয়। " এবং অবশ্যই, আপনি এর .change()পরিবর্তে শর্টকাট ব্যবহার করতে পারেন ।

— ফোনিক্স

@ অ্যালেক্স আপনি কিছু ভুল করছেন, এটি jQuery 1.7 থেকে api.jquery.com/on দেখুন ।

— ফোনিক্স

@ ফোনিক্স আপনি এখনও ফায়ারফক্স 22.0 ব্যবহার করছেন?

— MonkeyZeus

Answer 2

আমি এই ছাপের মধ্যে ছিলাম যে আমি এই $ (এটি) .val () করে একটি নির্বাচিত ইনপুটটির মান পেতে পারি;

আপনি যদি বিনা মূল্যে সাবস্ক্রাইব করেন তবে এটি কাজ করে (যা প্রস্তাবিত পদ্ধতির):

$('#id_of_field').change(function() {
    // $(this).val() will work here
});

আপনি যদি onselectস্ক্রিপ্টের সাথে মার্কআপ ব্যবহার এবং মিশ্রণ করেন তবে আপনাকে বর্তমান উপাদানটির একটি রেফারেন্স পাস করতে হবে:

onselect="foo(this);"

এবং তারপর:

function foo(element) {
    // $(element).val() will give you what you are looking for
}

Answer 3

এটা আমার জন্য সাহায্য করা হয়।

নির্বাচনের জন্য:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

রেডিও / চেকবক্সের জন্য:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

Answer 4

ইভেন্ট প্রতিনিধি পদ্ধতি ব্যবহার করে দেখুন, এটি প্রায় সব ক্ষেত্রেই কাজ করে।

$(document.body).on('change',"#selectID",function (e) {
   //doStuff
   var optVal= $("#selectID option:selected").val();
});

Answer 5

আপনি এটি ব্যবহার করতে পারেন ( jQuery ব্যবহার করে ) -

$('select').on('change', function()
{
    alert( this.value );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

অথবা আপনি সাধারণ জাভাস্ক্রিপ্ট এর মতো ব্যবহার করতে পারেন-

function getNewVal(item)
{
    alert(item.value);
}

<select onchange="getNewVal(this);">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Answer 6

$('#select_id').on('change', function()
{
    alert(this.value); //or alert($(this).val());
});



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="select_id">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>

Answer 7

তীর ফাংশনটির ফাংশনের চেয়ে আলাদা সুযোগ রয়েছে, this.valueএকটি তীর ফাংশনের জন্য অপরিজ্ঞাত দেবে। ব্যবহার ঠিক করতে

$('select').on('change',(event) => {
     alert( event.target.value );
 });

Answer 8

এটিই আমার পক্ষে কাজ করেছিল। ভাগ্য না দিয়ে অন্য সব কিছুর চেষ্টা করেছেন:

<html>

  <head>
    <title>Example: Change event on a select</title>

    <script type="text/javascript">

      function changeEventHandler(event) {
        alert('You like ' + event.target.value + ' ice cream.');
      }

    </script>

  </head>

  <body>
    <label>Choose an ice cream flavor: </label>
    <select size="1" onchange="changeEventHandler(event);">
      <option>chocolate</option>
      <option>strawberry</option>
      <option>vanilla</option>
    </select>
  </body>

</html>

মজিলা থেকে নেওয়া

Answer 9

JQuery সাইট অনুসন্ধান করুন

এইচটিএমএল:

<form>
  <input class="target" type="text" value="Field 1">
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

javascript:

$( ".target" ).change(function() {
  alert( "Handler for .change() called." );
});

jQuery এর উদাহরণ:

সমস্ত পাঠ্য ইনপুট উপাদানগুলিতে একটি বৈধতা পরীক্ষা যুক্ত করতে:

$( "input[type='text']" ).change(function() {
  // Check input( $( this ).val() ) for validity here
});

Answer 10

সমস্ত নির্বাচনের জন্য, এই ফাংশনটি প্রার্থনা করুন।

$('select').on('change', function()
{
    alert( this.value );
});

শুধুমাত্র একটি নির্বাচনের জন্য:

$('#select_id') 

Answer 11

jQuery পরিবর্তন ইভেন্ট ব্যবহার করে নির্বাচিত html উপাদানগুলির মান পান of

ডেমো এবং আরও উদাহরণের জন্য

$(document).ready(function () {   
    $('body').on('change','#select_box', function() {
         $('#show_only').val(this.value);
    });
}); 

<!DOCTYPE html>  
<html>  
<title>jQuery Select OnChnage Method</title>
<head> 
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>    
</head>  
<body>  
<select id="select_box">
 <option value="">Select One</option>
    <option value="One">One</option>
    <option value="Two">Two</option>
    <option value="Three">Three</option>
    <option value="Four">Four</option>
    <option value="Five">Five</option>
</select>
<br><br>  
<input type="text" id="show_only" disabled="">
</body>  
</html>  

Answer 12

মনে রাখবেন যে এগুলি যদি কাজ না করে তবে এটি হতে পারে কারণ DOM লোড হয়নি এবং আপনার উপাদানটি এখনও খুঁজে পাওয়া যায় নি।

ঠিক করতে, স্ক্রিপ্টটি শরীরের শেষে রাখুন বা প্রস্তুত নথি ব্যবহার করুন

$.ready(function() {
    $("select").on('change', function(ret) {  
         console.log(ret.target.value)
    }
})

Answer 13

jQuery(document).ready(function(){

    jQuery("#id").change(function() {
      var value = jQuery(this).children(":selected").attr("value");
     alert(value);

    });
})

Answer 14

আমাকে BS4, থাইমালিফ এবং স্প্রিং বুটের সাহায্যে বিকাশ করা একটি উদাহরণ শেয়ার করুন।

আমি দুটি নির্বাচন করে ব্যবহার করছি, যেখানে দ্বিতীয় ("সাবটপিক") প্রথম ("বিষয়") নির্বাচনের উপর ভিত্তি করে একটি এজেএক্স কল দ্বারা পূর্ণ হবে।

প্রথমত, থাইমেলিফ স্নিপেট:

 <div class="form-group">
     <label th:for="topicId" th:text="#{label.topic}">Topic</label>
     <select class="custom-select"
             th:id="topicId" th:name="topicId"
             th:field="*{topicId}"
             th:errorclass="is-invalid" required>
         <option value="" selected
                 th:text="#{option.select}">Select
         </option>
         <optgroup th:each="topicGroup : ${topicGroups}"
                   th:label="${topicGroup}">
             <option th:each="topicItem : ${topics}"
                     th:if="${topicGroup == topicItem.grp} "
                     th:value="${{topicItem.baseIdentity.id}}"
                     th:text="${topicItem.name}"
                     th:selected="${{topicItem.baseIdentity.id==topicId}}">
             </option>
         </optgroup>
         <option th:each="topicIter : ${topics}"
                 th:if="${topicIter.grp == ''} "
                 th:value="${{topicIter.baseIdentity.id}}"
                 th:text="${topicIter.name}"
                 th:selected="${{topicIter.baseIdentity?.id==topicId}}">
         </option>
     </select>
     <small id="topicHelp" class="form-text text-muted"
            th:text="#{label.topic.tt}">select</small>
</div><!-- .form-group -->

<div class="form-group">
    <label for="subtopicsId" th:text="#{label.subtopicsId}">subtopics</label>
    <select class="custom-select"
            id="subtopicsId" name="subtopicsId"
            th:field="*{subtopicsId}"
            th:errorclass="is-invalid" multiple="multiple">
        <option value="" disabled
                th:text="#{option.multiple.optional}">Select
        </option>
        <option th:each="subtopicsIter : ${subtopicsList}"
                th:value="${{subtopicsIter.baseIdentity.id}}"
                th:text="${subtopicsIter.name}">
        </option>
    </select>
    <small id="subtopicsHelp" class="form-text text-muted"
           th:unless="${#fields.hasErrors('subtopicsId')}"
           th:text="#{label.subtopics.tt}">select</small>
    <small id="subtopicsIdError" class="invalid-feedback"
           th:if="${#fields.hasErrors('subtopicsId')}"
           th:errors="*{subtopicsId}">Errors</small>
</div><!-- .form-group -->

মডেল প্রসঙ্গে সংরক্ষণ করা বিষয়গুলির তালিকার উপরে আমি পুনরাবৃত্তি করছি, সমস্ত দলকে তাদের বিষয়বস্তুগুলি দেখিয়েছি এবং তারপরে সমস্ত বিষয়গুলির একটি গ্রুপ নেই। বেসআইডেন্টিটি হ'ল @ এমবেডড কমপোজিট কী বিটিডাব্লু।

এখন, jQuery এখানে পরিবর্তনগুলি পরিচালনা করে:

$('#topicId').change(function () {
    selectedOption = $(this).val();
    if (selectedOption === "") {
        $('#subtopicsId').prop('disabled', 'disabled').val('');
        $("#subtopicsId option").slice(1).remove(); // keep first
    } else {
        $('#subtopicsId').prop('disabled', false)
        var orig = $(location).attr('origin');
        var url = orig + "/getsubtopics/" + selectedOption;
        $.ajax({
            url: url,
           success: function (response) {
                  var len = response.length;
                    $("#subtopicsId option[value!='']").remove(); // keep first 
                    for (var i = 0; i < len; i++) {
                        var id = response[i]['baseIdentity']['id'];
                        var name = response[i]['name'];
                        $("#subtopicsId").append("<option value='" + id + "'>" + name + "</option>");
                    }
                },
                error: function (e) {
                    console.log("ERROR : ", e);
                }
        });
    }
}).change(); // and call it once defined

পরিবর্তনের প্রাথমিক কলটি () নিশ্চিত করে যে এটি পৃষ্ঠা পুনরায় লোডে কার্যকর করা হবে বা যদি কোনও মান ব্যাকএন্ডে কিছু সূচনা দ্বারা পূর্বনির্ধারিত হয়েছে।

বিটিডাব্লু: আমি "ম্যানুয়াল" ফর্ম বৈধতা ব্যবহার করছি (দেখুন "বৈধ" / "অবৈধ"), কারণ আমি (এবং ব্যবহারকারীরা) পছন্দ করি নি যে BS4 অপ্রয়োজনীয় খালি ক্ষেত্রকে সবুজ হিসাবে চিহ্নিত করে। তবে এটি এই প্রশ্নটির বাইন্ড স্কোপ এবং আপনি যদি আগ্রহী হন তবে আমি এটি পোস্টও করতে পারি।

Answer 15

আমি যুক্ত করতে চাই, যার সম্পূর্ণ কাস্টম শিরোনাম কার্যকারিতা প্রয়োজন

   function addSearchControls(json) {
        $("#tblCalls thead").append($("#tblCalls thead tr:first").clone());
        $("#tblCalls thead tr:eq(1) th").each(function (index) {
            // For text inputs
            if (index != 1 && index != 2) {
                $(this).replaceWith('<th><input type="text" placeholder=" ' + $(this).html() + ' ara"></input></th>');
                var searchControl = $("#tblCalls thead tr:eq(1) th:eq(" + index + ") input");
                searchControl.on("keyup", function () {
                    table.column(index).search(searchControl.val()).draw();
                })
            }
            // For DatePicker inputs
            else if (index == 1) {
                $(this).replaceWith('<th><input type="text" id="datepicker" placeholder="' + $(this).html() + ' ara" class="tblCalls-search-date datepicker" /></th>');

                $('.tblCalls-search-date').on('keyup click change', function () {
                    var i = $(this).attr('id');  // getting column index
                    var v = $(this).val();  // getting search input value
                    table.columns(index).search(v).draw();
                });

                $(".datepicker").datepicker({
                    dateFormat: "dd-mm-yy",
                    altFieldTimeOnly: false,
                    altFormat: "yy-mm-dd",
                    altTimeFormat: "h:m",
                    altField: "#tarih-db",
                    monthNames: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"],
                    dayNamesMin: ["Pa", "Pt", "Sl", "Ça", "Pe", "Cu", "Ct"],
                    firstDay: 1,
                    dateFormat: "yy-mm-dd",
                    showOn: "button",
                    showAnim: 'slideDown',
                    showButtonPanel: true,
                    autoSize: true,
                    buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
                    buttonImageOnly: false,
                    buttonText: "Tarih Seçiniz",
                    closeText: "Temizle"
                });
                $(document).on("click", ".ui-datepicker-close", function () {
                    $('.datepicker').val("");
                    table.columns(5).search("").draw();
                });
            }
            // For DropDown inputs
            else if (index == 2) {
                $(this).replaceWith('<th><select id="filter_comparator" class="styled-select yellow rounded"><option value="select">Seç</option><option value="eq">=</option><option value="gt">&gt;=</option><option value="lt">&lt;=</option><option value="ne">!=</option></select><input type="text" id="filter_value"></th>');

                var selectedOperator;
                $('#filter_comparator').on('change', function () {
                    var i = $(this).attr('id');  // getting column index
                    var v = $(this).val();  // getting search input value
                    selectedOperator = v;
                    if(v=="select")
                        table.columns(index).search('select|0').draw();
                    $('#filter_value').val("");
                });

                $('#filter_value').on('keyup click change', function () {
                    var keycode = (event.keyCode ? event.keyCode : event.which);
                    if (keycode == '13') {
                        var i = $(this).attr('id');  // getting column index
                        var v = $(this).val();  // getting search input value
                        table.columns(index).search(selectedOperator + '|' + v).draw();
                    }
                });
            }
        })

    }