Tôi là người mới làm quen với JavaScript và jQuery. Tôi muốn hiển thị một combobox-A, đó là một HTML <select>với idnội dung được chọn và nội dung của nó ở vị trí khác trên onChange ().

Làm cách nào tôi có thể vượt qua hộp tổ hợp hoàn chỉnh với lựa chọn của nó idvà làm cách nào tôi có thể vượt qua các tham số khác khi phát sinh sự kiện onChange?

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>

Ví dụ trên giúp bạn nhận được giá trị đã chọn của hộp tổ hợp trong sự kiện OnChange .

Một cách tiếp cận khác có thể có ích trong một số trường hợp, là chuyển <option />trực tiếp giá trị được chọn vào hàm như thế này:

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>

Để biết cách thực hiện trong 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>

Bạn cũng nên biết rằng Javascript và jQuery không giống nhau. jQuery là mã JavaScript hợp lệ, nhưng không phải tất cả JavaScript đều là jQuery. Bạn nên tìm kiếm sự khác biệt và chắc chắn rằng bạn đang sử dụng một sự phù hợp.

Giải pháp 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>

hoặc là

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

hoặc là

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

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

Tôi thấy câu trả lời của @ Piyush rất hữu ích và chỉ cần thêm vào nó, nếu bạn lập trình tạo một lựa chọn, thì có một cách quan trọng để có được hành vi này có thể không rõ ràng. Giả sử bạn có một chức năng và bạn tạo một lựa chọn mới:

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

Các hành vi bình thường có thể nói

newSelect.onchange = changeitem;

Nhưng điều này không thực sự cho phép bạn chỉ định đối số được truyền vào, vì vậy thay vào đó bạn có thể làm điều này:

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

Và bạn có thể thiết lập tham số. Nếu bạn làm theo cách đầu tiên, thì đối số bạn sẽ nhận được cho onchangechức năng của mình sẽ phụ thuộc vào trình duyệt. Cách thứ hai dường như chỉ hoạt động trên nhiều trình duyệt.

Giải pháp jQuery

Làm cách nào để có được giá trị văn bản của tùy chọn đã chọn

Chọn các yếu tố thường có hai giá trị mà bạn muốn truy cập.
Đầu tiên, có giá trị được gửi đến máy chủ, thật dễ dàng:

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

Thứ hai là giá trị văn bản của lựa chọn.
Ví dụ: sử dụng hộp chọn sau:

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

Nếu bạn muốn lấy chuỗi "Mr" nếu tùy chọn đầu tiên được chọn (thay vì chỉ "1"), bạn sẽ làm điều đó theo cách sau:

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

Xem thêm

• .val () Tài liệu API jQuery

Điều này được giúp đỡ cho tôi.

Để chọn:

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

Đối với radio / hộp kiểm:

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

Bạn có thể thử mã dưới đây

<select onchange="myfunction($(this).val())" id="myId">
    </select>

mã này một khi tôi viết chỉ để giải thích về sự kiện chọn, bạn có thể lưu mã này dưới dạng html và xem đầu ra nó hoạt động. Và dễ hiểu cho bạn.

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

Chỉ trong trường hợp ai đó đang tìm kiếm giải pháp React mà không phải tải xuống các phụ thuộc bổ sung mà bạn có thể viết:

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

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

Đảm bảo liên kết hàm đã thay đổi () trong hàm tạo như:

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

Điều này làm việc cho tôi onchange = setLocation($(this).val())

Đây.

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });