jQuery รับค่าของ select onChange

779

ฉันอยู่ภายใต้การแสดงผลที่ฉันสามารถรับค่าของอินพุตที่เลือกโดยทำสิ่งนี้$(this).val();และใช้onchangeพารามิเตอร์กับฟิลด์ที่เลือก

มันจะปรากฏขึ้นใช้งานได้ถ้าฉันอ้างอิง ID

ฉันจะใช้สิ่งนี้ได้อย่างไร

jquery select

— RIK
แหล่งที่มา

1491

ลองสิ่งนี้ -

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

ขยายตัวอย่างข้อมูล

นอกจากนี้คุณยังสามารถอ้างอิงกับเหตุการณ์ onchange-

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

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

ขยายตัวอย่างข้อมูล

— thecodeparadox
แหล่งที่มา

15

ฉันรู้ว่ามันค่อนข้างช้า แต่ถ้าคุณใช้แป้นพิมพ์ (แท็บ) เพื่อสำรวจฟอร์มและใช้ลูกศรขึ้น / ลงเพื่อเลือกจากรายการแบบเลื่อนลง FireFox (22.0) จะไม่เรียกใช้เหตุการณ์การเปลี่ยนแปลง คุณต้องผูกปุ่มกดเพิ่มเติมสำหรับ FireFox ข้อมูลเพิ่มเติม: jQuery 1.10.2 ใช้ไวยากรณ์ $ ('select'). on ('เปลี่ยน', function () {/ * do seomthing * /});

— MonkeyZeus

Mhh สำหรับฉันตัวอย่าง jQuery ไม่ทำงานและฉันแน่ใจว่าฉันมีไฟล์ jQuery 1.11 โหลดอย่างถูกต้องในหน้าของฉัน ในบันทึกของเบราว์เซอร์ของฉันฉันได้รับสิ่งนี้: ไม่มีเมธอด 'เปิด' ฉันลองทั้งบน Firefox และ Chrome ผลลัพธ์เดียวกัน มันเป็นการใช้งานแบบมาตรฐานหรือใช้กับ jquery เวอร์ชั่นใหม่กว่าเท่านั้น ขอบคุณสำหรับคำตอบ

— Alex

2

@MonkeyZeus คุณไม่ต้องการมันจะถูกเรียกใช้เมื่อองค์ประกอบเสียโฟกัส จาก (วิธีการเปลี่ยน jQuery) [ api.jquery.com/change/] "สำหรับกล่องที่เลือกช่องทำเครื่องหมายและปุ่มตัวเลือกเหตุการณ์จะเริ่มทำงานทันทีที่ผู้ใช้ทำการเลือกด้วยเมาส์ แต่สำหรับองค์ประกอบอื่น ๆ ที่เป็นประเภทเหตุการณ์ จะถูกเลื่อนออกไปจนกว่าองค์ประกอบจะสูญเสียการโฟกัส " และแน่นอนคุณสามารถใช้.change()ทางลัดแทน

— PhoneixS

@ Alex คุณกำลังทำสิ่งที่ไม่ถูกต้องจะได้รับตั้งแต่ jQuery 1.7 เห็นapi.jquery.com/on

— PhoneixS

1

@PhoneixS คุณยังใช้ FireFox 22.0 อยู่หรือเปล่า?

— MonkeyZeus

103

ฉันอยู่ภายใต้การแสดงผลที่ฉันสามารถรับค่าของอินพุตที่เลือกโดยทำ $ (this) .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
}

— ดารินดิมิททรอฟ
แหล่งที่มา

99

สิ่งนี้ช่วยฉันได้

สำหรับการเลือก:

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

สำหรับวิทยุ / ช่องทำเครื่องหมาย:

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

— ilgam
แหล่งที่มา

16

ลองใช้วิธีการมอบหมายเหตุการณ์ซึ่งจะได้ผลในเกือบทุกกรณี

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

— กฤษณะ
แหล่งที่มา

10

คุณสามารถลอง (ใช้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>

ขยายตัวอย่างข้อมูล

หรือคุณสามารถใช้ Javascript แบบง่าย ๆ เช่นนี้ -

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>

ขยายตัวอย่างข้อมูล

— Abrar Jahin
แหล่งที่มา

10

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

— Ankit Pise
แหล่งที่มา

9

ฟังก์ชั่นลูกศรมีขอบเขตที่แตกต่างจากฟังก์ชั่น this.valueจะให้ไม่ได้กำหนดสำหรับฟังก์ชั่นลูกศร เพื่อแก้ไขการใช้งาน

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

— Sharuk Ahmed
แหล่งที่มา

6

นี่คือสิ่งที่ได้ผลสำหรับฉัน พยายามทุกอย่างอื่นโดยไม่มีโชค:

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

นำมาจากMozilla

— drjorgepolanco
แหล่งที่มา

6

ค้นหาไซต์ 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
});

— Andre Mesquita
แหล่งที่มา

6

สำหรับการเลือกทั้งหมดให้เรียกใช้ฟังก์ชันนี้

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

สำหรับการเลือกเดียวเท่านั้น:

$('#select_id')

— อาลีซาด
แหล่งที่มา

4

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>

ขยายตัวอย่างข้อมูล

— ผู้พัฒนา
แหล่งที่มา

3

โปรดทราบว่าหากสิ่งเหล่านี้ไม่ทำงานอาจเป็นเพราะ DOM ไม่ได้โหลดและยังไม่พบองค์ประกอบของคุณ

ในการแก้ไขให้วางสคริปต์ที่ส่วนท้ายของเนื้อหาหรือใช้เอกสารพร้อม

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

— Colin D
แหล่งที่มา

2

jQuery(document).ready(function(){

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

    });
})

— Virendra Yaduvanshi
แหล่งที่มา

2

ให้ฉันแบ่งปันตัวอย่างที่ฉันพัฒนากับ BS4, thymeleaf และ Spring boot

ฉันใช้สองตัวเลือกโดยที่ตัวที่สอง ("subtopic") จะถูกเติมด้วยการโทร AJAX ตามการเลือกตัวแรก ("หัวข้อ")

ประการแรกตัวอย่างของ thymeleaf:

 <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

ตอนนี้นี่คือ 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" / "ไม่ถูกต้อง") เพราะฉัน (และผู้ใช้) ไม่ชอบ BS4 ที่ทำเครื่องหมายว่าฟิลด์ว่างที่ไม่ต้องการเป็นสีเขียว แต่นั่นคือขอบเขตของคำถามนี้และหากคุณสนใจฉันสามารถโพสต์ได้เช่นกัน

— 4braincells
แหล่งที่มา

1

ฉันต้องการเพิ่มใครต้องการฟังก์ชั่นส่วนหัวที่กำหนดเองอย่างสมบูรณ์

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

    }

— ฮามิท YILDIRIM
แหล่งที่มา