Nhận giá trị / văn bản đã chọn từ Chọn khi thay đổi

<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

Tôi cần lấy giá trị của tùy chọn đã chọn trong javascript: có ai biết cách lấy giá trị hoặc văn bản đã chọn, vui lòng cho biết cách viết một hàm cho nó. Tôi đã gán hàm onchange () để chọn, vậy tôi phải làm gì sau đó?

Sử dụng JavaScript hoặc jQuery cho việc này.

Sử dụng JavaScript

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

Sử dụng jQuery

$('#select_id').change(function(){
    alert($(this).val());
})

Nếu bạn đang tìm kiếm điều này và không muốn trình xử lý sự kiện là một thuộc tính, hãy sử dụng:

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Không cần một chức năng thay đổi. Bạn có thể lấy giá trị trong một dòng:

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

Hoặc, chia nó ra để dễ đọc hơn:

var select_id = document.getElementById("select_id");

select_id.options[select_id.selectedIndex].value;

Chà, chưa có giải pháp nào thực sự có thể tái sử dụng trong số các câu trả lời .. Ý tôi là, một trình xử lý sự kiện độc lập sẽ chỉ nhận được một eventđối số và hoàn toàn không phải sử dụng id .. Tôi sẽ sử dụng:

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with value
}

Bạn có thể sử dụng trình xử lý này với mỗi - js nội tuyến:

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

jQuery:

jQuery('#select_id').on('change',handleSelectChange);

hoặc cài đặt trình xử lý vanilla JS:

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

Và không cần phải viết lại điều này cho mỗi selectphần tử bạn có.

Đoạn mã ví dụ:

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});

Sử dụng

document.getElementById("select_id").selectedIndex

Hoặc để nhận giá trị:

document.getElementById("select_id").value

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

trong cảnh báo, bạn sẽ thấy giá trị INT của chỉ mục đã chọn, coi lựa chọn như một mảng và bạn sẽ nhận được giá trị

HTML:

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

JS:

function cityChanged(city) {
    alert(city);
}

Tôi tự hỏi rằng mọi người đã đăng về valuevà texttùy chọn để lấy từ đó <option>và không ai đề xuất label.

Vì vậy, tôi cũng đang đề xuất label, như được hỗ trợ bởi tất cả các trình duyệt

Để có được value(giống như những người khác đề xuất)

function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}

Để lấy option text(tức là Giao tiếp hoặc -Chọn-)

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

HOẶC (Đề xuất mới)

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

HTML

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2" label=‘newText’>Communication</option>
</select>

Lưu ý: Trong HTML ở trên cho optiongiá trị 2, labelsẽ trả về newText thay vì Communication

Cũng thế

Lưu ý: Không thể đặt thuộc tính nhãn trong Firefox (chỉ trả về).

Đây là một câu hỏi cũ, nhưng tôi không chắc tại sao mọi người không đề xuất sử dụng đối tượng sự kiện để truy xuất thông tin thay vì tìm kiếm lại qua DOM.

Chỉ cần đi qua đối tượng sự kiện trong hàm onChange của bạn, xem ví dụ bên dưới

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

Có thể hữu ích cho những người đang tìm kiếm điều này ngày hôm nay nếu đây không phải là hành vi mặc định 7 năm trước

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Tôi đã cố gắng giải thích với mẫu của riêng tôi, nhưng tôi hy vọng nó sẽ giúp bạn. Bạn không cần onchange = "test ()" Vui lòng chạy đoạn mã để nhận kết quả trực tiếp.

document.getElementById("cars").addEventListener("change", displayCar);

function displayCar() {
  var selected_value = document.getElementById("cars").value;
  alert(selected_value);
}

<select id="cars">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="audi">Audi</option>
</select>