วิธีการผ่านพารามิเตอร์ใน onChange ของ html เลือก


198

ฉันเป็นสามเณรที่ JavaScript และ jQuery ฉันต้องการแสดงหนึ่ง combobox-A ซึ่งเป็น HTML ที่<select>มีการเลือกidและเนื้อหาที่สถานที่อื่น ๆ ใน onChange ()

ฉันจะส่งคอมโบบ็อกซ์ที่สมบูรณ์ได้อย่างไรด้วยการเลือก idอย่างไรและฉันจะส่งพารามิเตอร์อื่น ๆ ไปยังส่วนอื่นของเหตุการณ์ onChange ได้อย่างไร


5
คุณช่วยโพสต์รหัสได้ไหม?
KJYe.Name 葉家仁

คำตอบ:


372

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(value);
}
<select id="comboA" onchange="getComboA(this)">
  <option value="">Select combo</option>
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
  <option value="Value3">Text3</option>
</select>

ตัวอย่างข้างต้นทำให้คุณได้รับคุณค่าของกล่องคำสั่งผสมในเหตุการณ์OnChange


ขอบคุณสิ่งนี้ได้ผลสำหรับฉัน โดยทั่วไปฉันต้องการแสดง combobox เดียวกันในสถานที่ที่แตกต่างกันดังนั้นฉันให้ 2 รหัสที่แตกต่างกันไป 2 combobox ที่นั่นแล้วฉันสามารถแสดง combobox เดียวกันในสถานที่ที่แตกต่างกัน ความช่วยเหลือใด ๆ จะได้รับการชื่นชมอย่างมาก
Gendaful

13
วิธีที่กระชับยิ่งขึ้นในการเรียกคืนค่าภายในgetComboA()คือvar value = sel.value;
Yony

4
เหตุการณ์การเปลี่ยนแปลงจะเริ่มขึ้นก็ต่อเมื่อกล่องที่เลือกไม่มีการโฟกัส มีวิธีในการเริ่มต้นเหตุการณ์ทันทีหลังจากการเปลี่ยนแปลงค่าหรือไม่
doABarrelRoll721

2
ใช้ this.value แทนและจะใช้งานได้ =) การส่งสิ่งนี้เป็นการส่งองค์ประกอบที่เลือกทั้งหมด
Colin Rickels

สำหรับกรณีของฉันรหัสทำงานบน Firefox แต่ไม่ใช่ใน Chrome
avijit bhattacharjee

50

วิธีการอื่นที่สามารถใช้ประโยชน์ได้ในบางสถานการณ์คือการส่งค่าของสิ่งที่เลือก<option />ไปยังฟังก์ชันดังนี้:

function myFunction(chosen) {
  console.log(chosen);
}
<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>


1
นี่คือสิ่งที่ฉันต้องการ มีฟังก์ชั่นจาวาสคริปต์ที่เปลี่ยนรูปสีเมื่อคลิกแถบสี แต่มีคำขอให้ทำงานกับตัวเลือกแบบเลื่อนลงของ PayPal ด้วยเช่นกัน ใช้สิ่งนี้ แต่แทนที่จะใช้ 'value' (เนื่องจากฉันต้องการใช้กับ Paypal) ฉันเพิ่ม 'label' ในแต่ละตัวเลือกด้วยชื่อตัวแปรที่ฉันใช้ในการเปลี่ยนรูป ทำงานอย่างสมบูรณ์แบบ! ขอบคุณ !!
FlashNoob468

5
นี่เป็นสิ่งที่ดี อีกทางเลือกที่ง่ายกว่าคือ: <select onChange = "myFunction (this.value)">
Daniel Silva

1
มีประโยชน์ในการเข้าถึงคุณสมบัติอื่น ๆ ของตัวเลือกที่เลือก
Cees Timmerman

31

สำหรับวิธีการทำใน jQuery:

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

คุณควรทราบด้วยว่า Javascript และ jQuery นั้นไม่เหมือนกัน jQuery เป็นรหัส JavaScript ที่ถูกต้อง แต่ไม่ใช่ JavaScript ทั้งหมดที่เป็น jQuery คุณควรค้นหาความแตกต่างและให้แน่ใจว่าคุณใช้ที่เหมาะสม


2
ฉันลองสิ่งนี้ แต่ฟังก์ชั่นการเปลี่ยนแปลงไม่ได้รับการเรียกแม้ว่าฉันจะใส่ใน document.ready method รหัสของฉันคือ htmlData.push ('<select id = "select" name = "select">'); $ ('# select'). change (ฟังก์ชั่น () {alert ('เปลี่ยนชื่อ'); alert ('ตัวเลือกที่มีค่า' + $ (นี้) .value () + 'และข้อความ' + $ (อันนี้) ข้อความ () + 'ถูกเลือก') โปรดช่วยฉันด้วย
Gendaful

@Gendaful: htmlData.push($('<select id="choose" name="choose">'));ควรทำเคล็ดลับ (คุณผลักสตริงแทนโหนดเต็มเป่าก่อน) > 6 ปีผ่านไป ...
โยฮันเนส

6

โซลูชัน JavaScript

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

หรือ

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

หรือ

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>

นี่เป็นคำตอบทั่วไปและครอบคลุมที่สุดที่นี่ ขอบคุณ!
divs1210

5

ฉันพบว่าคำตอบของ @ Piyush มีประโยชน์และเพียงเพิ่มเข้าไปในนั้นถ้าคุณสร้างตัวเลือกโดยทางโปรแกรมแล้วมีวิธีที่สำคัญในการรับพฤติกรรมนี้ซึ่งอาจไม่ชัดเจน สมมติว่าคุณมีฟังก์ชั่นและคุณสร้างตัวเลือกใหม่:

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

พฤติกรรมปกติอาจจะพูด

newSelect.onchange = changeitem;

แต่นี่ไม่อนุญาตให้คุณระบุอาร์กิวเมนต์ที่ส่งผ่านดังนั้นคุณอาจทำสิ่งนี้แทน:

newSelect.setAttribute('onchange', 'changeitem(this)');

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


1
evalการแปลงสตริงเป็นรหัสที่ชั่วร้ายของคุณไม่จำเป็น ใช้newSelect.onchange = changeitem;งานได้จริงถ้าคุณเขียนเปลี่ยนเป็นvar changeitem = function () {console.log(this.selectedIndex); };(เช่นใช้thisแทนอาร์กิวเมนต์ฟังก์ชั่น) หรือปล่อยให้เป็นอยู่และการเขียนchangeitem newSelect.onchange = function () {changeitem(this); };
Steve Byrnes

1
newSelect.setAttribute ('onchange', 'changeitem (นี่)'); - ไชโยนั่น
ghosh

5

โซลูชั่น jQuery

ฉันจะรับค่าข้อความของตัวเลือกที่เลือกได้อย่างไร

องค์ประกอบที่เลือกมักจะมีสองค่าที่คุณต้องการเข้าถึง
ก่อนอื่นมีค่าที่จะส่งไปยังเซิร์ฟเวอร์ซึ่งง่าย:

$( "#myselect" ).val();
// => 1

ประการที่สองคือค่าข้อความของการเลือก
ตัวอย่างเช่นการใช้กล่องเลือกต่อไปนี้:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

หากคุณต้องการรับสายอักขระ "Mr" ถ้าตัวเลือกแรกถูกเลือก (แทนที่จะเป็นเพียง "1") คุณจะทำตามวิธีต่อไปนี้:

$( "#myselect option:selected" ).text();
// => "Mr"  

ดูสิ่งนี้ด้วย


5

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

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

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

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

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


1

รหัสนี้เมื่อฉันเขียนเพื่ออธิบายเพียงแค่เปลี่ยนเหตุการณ์ของการเลือกคุณสามารถบันทึกรหัสนี้เป็น html และดูผลลัพธ์มันใช้งานได้และเข้าใจง่ายสำหรับคุณ

<html>
    <head>
        <title>Register</title>
    </head>
    <body>
    <script>
        function show(){
            var option = document.getElementById("category").value;
            if(option == "Student")
                  {
                        document.getElementById("enroll1").style.display="block";
                  }
            if(option == "Parents")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
            if(option == "Guardians")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
        }
    </script>
            <form action="#" method="post">
                <table>
                    <tr>
                        <td><label>Name </label></td>
                        <td><input type="text" id="name" size=20 maxlength=20 value=""></td>
                    </tr>
                    <tr style="display:block;" id="enroll1">
                        <td><label>Enrollment No. </label></td>
                        <td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Email </label></td>
                        <td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Mobile No. </label></td>
                        <td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Address</label></td>
                        <td><textarea rows="2" cols="20"></textarea></td>
                    </tr>
                    <tr >
                        <td><label>Category</label></td>
                        <td><select id="category" onchange="show()">    <!--onchange show methos is call-->
                                <option value="Student">Student</option>
                                <option value="Parents">Parents</option>
                                <option value="Guardians">Guardians</option>
                            </select>
                        </td>
                    </tr>
                </table><br/>
            <input type="submit" value="Sign Up">
        </form>
    </body>
</html>

1

ในกรณีที่มีใครบางคนกำลังมองหาวิธีการตอบสนองโดยไม่ต้องดาวน์โหลดการพึ่งพานอกจากนี้คุณสามารถเขียน:

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

ตรวจสอบให้แน่ใจว่าได้ผูกกับฟังก์ชั่นที่เปลี่ยนแปลง () ใน Constructor เช่น:

this.changed = this.changed.bind(this);

0

สิ่งนี้ใช้ได้กับฉัน onchange = setLocation($(this).val())

ที่นี่

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.