jQuery के चुनिंदा ऑनचेंज का मूल्य प्राप्त करें

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

मुझे पता है कि यह काफी देर से होता है, लेकिन यदि आप एक फ़ॉर्म को नेविगेट करने के लिए कीबोर्ड (टैबिंग) का उपयोग कर रहे हैं और ड्रॉपडाउन सूची से चुनने के लिए ऊपर / नीचे तीर का उपयोग करते हैं तो फायरफॉक्स (22.0) परिवर्तन घटना को ट्रिगर नहीं करता है। आपको फ़ायर्फ़ॉक्स के लिए अतिरिक्त रूप से कीप को बाँधने की आवश्यकता है। अतिरिक्त जानकारी: वाक्यविन्यास $ ('चयन') का उपयोग करके jQuery 1.10.2। ('परिवर्तन', फ़ंक्शन) () {/ * seomthing * /});

— मंकीज़ियस

मेरे लिए mhh, jQuery का उदाहरण काम नहीं करता है, और मुझे यकीन है कि मुझे अपने पृष्ठ में 1.11 jQuery फ़ाइल सही ढंग से लोड की गई है। अपने ब्राउज़र के जेएस लॉग में, मुझे यह मिला: 'ऑन' का कोई तरीका नहीं है। मैंने इसे फ़ायरफ़ॉक्स और क्रोम दोनों पर आज़माया, एक ही परिणाम। क्या यह एक मानक उपयोग है या इसे केवल नए jquery संस्करणों में लागू किया गया था? इस जवाब के लिए thx

— एलेक्स

@MonkeyZeus आपको जरूरत नहीं है, यह तब ट्रिगर होगा जब घटक फोकस खो देगा। से (jQuery परिवर्तन विधि) [ api.jquery.com/change/] "चुनिंदा बॉक्स, चेकबॉक्स और रेडियो बटन के लिए, घटना को तुरंत निकाल दिया जाता है जब उपयोगकर्ता माउस के साथ चयन करता है, लेकिन अन्य तत्व के लिए घटना को टाइप करता है। तब तक टाल दिया जाता है जब तक कि तत्व ध्यान केंद्रित नहीं करता। " और हां, आप .change()इसके बजाय शॉर्टकट का उपयोग कर सकते हैं ।

— फोनिक्स

@ यदि आप कुछ गलत कर रहे हैं, तो यह jQuery 1.7 के बाद से api.jquery.com/on देखें ।

— फोनिक्स

@Phoneix क्या आप अभी भी FireFox 22.0 का उपयोग कर रहे हैं?

— मंकीज़ेउस

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 साइट के लिए देखो

HTML:

<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 तत्वों का मूल्य प्राप्त करता है

डेमो और अधिक उदाहरण के लिए

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

मुझे एक उदाहरण साझा करें जो मैंने बीएस 4, थाइमेल्फ और स्प्रिंग बूट के साथ विकसित किया है।

मैं दो चयनों का उपयोग कर रहा हूं, जहां दूसरा ("सबटॉपिक") पहले ("विषय") के चयन के आधार पर एक AJAX कॉल द्वारा भरा जाता है।

सबसे पहले, थाइमेल्फ स्निपेट:

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

मैं उन विषयों की एक सूची पर ध्यान केंद्रित कर रहा हूं, जो मॉडल संदर्भ में संग्रहीत हैं, सभी समूहों को उनके विषयों के साथ दिखा रहे हैं, और उसके बाद उन सभी विषयों पर जिनके पास समूह नहीं है। BaseIdentity एक @Embedded मिश्रित कुंजी BTW है।

अब, यहाँ 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

परिवर्तन की प्रारंभिक कॉल () यह सुनिश्चित करती है कि इसे पृष्ठ पुनः लोड पर निष्पादित किया जाएगा या यदि बैकएंड में कुछ आरंभीकरण द्वारा मूल्य का अनुमान लगाया गया है।

BTW: मैं "मैनुअल" फॉर्म वैलिडेशन का उपयोग कर रहा हूं (देखें "is-valid" / "is-अमान्य"), क्योंकि मैं (और उपयोगकर्ताओं) को यह पसंद नहीं आया कि 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();
                    }
                });
            }
        })

    }