jquery select change event เลือกตัวเลือกที่เลือกไว้

234

ฉันผูกเหตุการณ์ในเหตุการณ์การเปลี่ยนแปลงขององค์ประกอบที่เลือกของฉันด้วยสิ่งนี้:

$('select').on('change', '', function (e) {

});

ฉันจะเข้าถึงองค์ประกอบที่เลือกไว้เมื่อเหตุการณ์การเปลี่ยนแปลงเกิดขึ้นได้อย่างไร

jquery events

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

1

ทำไมคุณพูดอย่างนี้?

— Miguel

3

@superuberduper ฉันหลีกเลี่ยง jQuery นานเท่าที่จะทำได้ แต่ความต้านทานนั้นไร้ประโยชน์ คุณจะรู้สึกดีขึ้นมากหลังจากหลอมรวม

— adg

lolol @adg ดีมาก!

— SuperUberDuper

460

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

— Naftali aka Neal
แหล่งที่มา

8

ไวยากรณ์ $ ("selector" นี่คืออะไร) หมายความว่าอย่างไร ฉันมีความคิดทั่วไป แต่ฉันไม่แน่ใจทั้งหมด

— JoshWillik

14

@JoshWillik กับ$("selector", this)คุณกำลังค้นหาselectorองค์ประกอบทั้งหมดในthisบริบทของ การเขียน $("selector", this)เกือบจะเหมือนกัน $(this).find('selector')

— Bellash

8

@JoshWillik: ตั้งแต่$()เป็นนามแฝงของjQuery()คุณสามารถค้นหาเอกสารที่นี่: api.jquery.com/jQueryjQuery( selector [, context ] )ลายเซ็นที่ระบุไว้มีอย่างเห็นได้ชัด @Bellash: ถ้ามัน "เกือบจะเหมือนกัน" ความแตกต่างคืออะไร? หรือเร็วกว่าอะไร ฉันชอบ.find()เนื่องจากนี่คือ OO IMO ...

— Adrian Föder

7

จะตรวจสอบในกรณีที่เลือกหลายรายการได้อย่างไร?

— Hemant_Negi

3

@ AdrianFöderสำหรับคุณและคนอื่น ๆ ที่กำลังมองหามัน.find()จะเร็วขึ้นประมาณ 10% ตามคำตอบนี้: stackoverflow.com/a/9046288/2767703

— Kevin van Mierlo

75

คุณสามารถใช้วิธีการค้นหา jQuery

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

วิธีการแก้ปัญหาข้างต้นทำงานได้อย่างสมบูรณ์ แต่ฉันเลือกที่จะเพิ่มรหัสต่อไปนี้สำหรับพวกเขายินดีที่จะได้รับตัวเลือกคลิก ช่วยให้คุณได้รับตัวเลือกที่เลือกแม้ว่าค่าที่เลือกนี้จะไม่เปลี่ยนแปลง (ทดสอบกับ Mozilla เท่านั้น)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });

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

การเชื่อมโยงกับoptionเหตุการณ์ถือเป็นข้อเสนอที่มีความเสี่ยงโดยเฉพาะอย่างยิ่งในอุปกรณ์พกพา ตัวอย่างเช่น Webkit ไม่สนับสนุนกิจกรรมนี้อย่างถูกต้อง: bugs.chromium.org/p/chromium/issues/detail?id=5284

— Ian Kemp

โอเคดี! อย่างที่ฉันได้กล่าวไปแล้วเบราว์เซอร์หลายตัวไม่รองรับโซลูชั่นที่สอง!

— Bellash

15

ทางเลือกที่ได้รับมอบหมาย

ในกรณีที่ใครก็ตามใช้วิธีการมอบหมายสำหรับผู้ฟังให้ใช้e.target(มันจะอ้างถึงองค์ประกอบที่เลือก)

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

การสาธิต JSFiddle

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

+1 เพราะนี่คือสิ่งที่ฉันต้องการ แต่เมื่อฉันลองสิ่งนี้ในพื้นที่มันไม่ทำงานฉันทำงานที่ jsfiddle เฉพาะ CDN ฉันต้องเพิ่มอะไรบ้าง

— AVI

6

ฉันพบว่าสั้นและสะอาดกว่านี้ นอกจากนี้คุณสามารถวนซ้ำรายการที่เลือกได้หากมีมากกว่าหนึ่งรายการ

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

— 1.44MB
แหล่งที่มา

selectedOptionsไม่สามารถใช้ได้ในทุกเบราว์เซอร์

— Bernhard Döbler

@ BernhardDöblerอันไหน? แหล่งใด

— 1.44mb

1

ฉันคัดลอกรหัสของคุณไปที่ IE 11 และได้รับข้อผิดพลาด this.options[ this.options.selectedIndex ]ฉันสิ้นสุดกับ Mozilla แจ้งว่ารองรับ Firefox จาก 26, IE ไม่รองรับ

— Bernhard Döbler

6

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

select optionครั้งแรกสร้าง หลังจากนั้นjqueryคุณจะได้รับค่าที่เลือกในปัจจุบันเมื่อผู้ใช้เปลี่ยนselect optionค่า

1

คุณสามารถแบ่งปันคำอธิบายรายละเอียดเพิ่มเติมของคำตอบของคุณได้ไหม?

— Mostafiz

@MostafizurRahman รหัสของฉันง่ายมากนั่นเป็นเหตุผลที่ฉันเขียนรหัสเท่านั้น

3

$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});

— Serdar Karaca
แหล่งที่มา

2

อีกวิธีหนึ่งและระยะสั้นในการรับค่าของค่าที่เลือก

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});

— ใบเสร็จรับเงิน
แหล่งที่มา

หากเป็นกรณีนี้ทำไมไม่เลือก "var selectVal = $ (" # selectElement "). val ()" work¿

— LuisE

เคสกำลังรับค่าเมื่อเหตุการณ์การเปลี่ยนแปลงถูกปล่อยบนอิลิเมนต์ที่เลือก ค่าจะไม่ได้รับการอัปเดตเมื่อเลือกการเปลี่ยนแปลงหากคุณทำเช่นนั้น

— ใบเสร็จสามารถ

0

ดูเอกสาร API อย่างเป็นทางการ https://api.jquery.com/selected-selector/

ผลงานที่ดีนี้:

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

และ

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

และเป็นเรื่องง่ายสำหรับตัวเลือกที่ไม่ซ้ำกัน

var SelVal = $( "#idSelect option:selected" ).val();

— alex Roosso
แหล่งที่มา

0

คุณสามารถใช้เหตุการณ์เปลี่ยนการเลือก jquery นี้เพื่อรับค่าตัวเลือกที่เลือก

สำหรับการสาธิต

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

<!DOCTYPE html>  
<html>  
<title>Learn Jquery value Method</title>
<head> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
</head>  
<body>  
<select id="select">
 <option value="">Select One</option>
    <option value="PHP">PHP</option>
    <option value="jAVA">JAVA</option>
    <option value="Jquery">jQuery</option>
    <option value="Python">Python</option>
    <option value="Mysql">Mysql</option>
</select>
<br><br>  
<input type="text" id="show_selected">
</body>  
</html>

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

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