Nhận giá trị được chọn trong danh sách thả xuống bằng JavaScript

Làm cách nào để có được giá trị được chọn từ danh sách thả xuống bằng JavaScript?

Tôi đã thử các phương thức bên dưới, nhưng tất cả chúng đều trả về chỉ mục đã chọn thay vì giá trị:

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

Nếu bạn có một yếu tố chọn giống như thế này:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

Chạy mã này:

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

Sẽ làm strUserđược 2. Nếu những gì bạn thực sự muốn là test2, sau đó làm điều này:

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

Mà sẽ làm strUserđượctest2

JavaScript đơn giản:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

var strUser = e.options[e.selectedIndex].value;

Điều này là chính xác và sẽ cung cấp cho bạn giá trị. Đó có phải là văn bản bạn đang theo đuổi?

var strUser = e.options[e.selectedIndex].text;

Vì vậy, bạn rõ ràng về thuật ngữ:

<select>
    <option value="hello">Hello World</option>
</select>

Tùy chọn này có:

• Chỉ số = 0
• Giá trị = xin chào
• Văn bản = Xin chào thế giới

Đoạn mã sau đây thể hiện các ví dụ khác nhau liên quan đến việc nhận / đặt các giá trị từ các trường nhập / chọn bằng JavaScript.

Liên kết nguồn

Trình diễn Javascript & jQuery

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

Kịch bản sau đây sẽ nhận giá trị của tùy chọn đã chọn và đặt nó vào hộp văn bản 1

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

Tập lệnh sau đang nhận giá trị từ hộp văn bản 2 và cảnh báo bằng giá trị của nó

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

Kịch bản sau đây đang gọi một chức năng từ một chức năng

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

var selectedValue = document.getElementById("ddlViewBy").value;

Nếu bạn từng chạy trên mã được viết hoàn toàn cho Internet Explorer, bạn có thể thấy điều này:

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

Chạy phần trên trong Firefox et al sẽ cung cấp cho bạn lỗi 'không phải là hàm', vì Internet Explorer cho phép bạn thoát khỏi việc sử dụng () thay vì []:

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

Cách chính xác là sử dụng dấu ngoặc vuông.

<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

Bất kỳ trường nhập / biểu mẫu nào cũng có thể sử dụng từ khóa của nhóm này khi bạn đang truy cập nó từ bên trong phần tử. Điều này giúp loại bỏ sự cần thiết phải định vị một biểu mẫu trong cây dom và sau đó định vị phần tử này bên trong biểu mẫu.

Người mới bắt đầu có thể muốn truy cập các giá trị từ một lựa chọn với thuộc tính NAME thay vì thuộc tính ID. Chúng tôi biết tất cả các yếu tố hình thức cần tên, ngay cả trước khi chúng có id.

Vì vậy, tôi đang thêm getElementByName()giải pháp cho các nhà phát triển mới cũng thấy.

Lưu ý Tên cho các thành phần của biểu mẫu sẽ cần phải là duy nhất để biểu mẫu của bạn có thể sử dụng được sau khi được đăng, nhưng DOM có thể cho phép một tên được chia sẻ bởi nhiều hơn một thành phần. Vì lý do đó, hãy xem xét thêm ID vào biểu mẫu nếu bạn có thể, hoặc rõ ràng với tên thành phần của biểu mẫu my_nth_select_named_xvà my_nth_text_input_named_y.

Ví dụ sử dụng getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Có hai cách để thực hiện việc này bằng cách sử dụng JavaScript hoặc jQuery.

JavaScript:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

HOẶC LÀ

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Chỉ dùng

• $('#SelectBoxId option:selected').text(); để có được văn bản như được liệt kê

• $('#SelectBoxId').val(); để nhận giá trị chỉ mục đã chọn

Các câu trả lời trước vẫn còn chỗ để cải thiện vì khả năng, tính trực giác của mã và việc sử dụng idso với name. Người ta có thể đọc được ba dữ liệu của một tùy chọn đã chọn - số chỉ mục, giá trị và văn bản của nó. Mã trình duyệt chéo đơn giản này thực hiện cả ba:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

Bản demo trực tiếp: http://jsbin.com/jiwena/1/edit?html,output .

idnên được sử dụng cho mục đích trang điểm. Đối với mục đích biểu mẫu chức năng, namevẫn hợp lệ, cũng trong HTML5 và vẫn nên được sử dụng. Cuối cùng, hãy chú ý đến việc sử dụng dấu ngoặc vuông so với dấu tròn ở một số vị trí nhất định. Như đã được giải thích trước đây, chỉ (phiên bản cũ hơn) Internet Explorer mới chấp nhận vòng tròn ở tất cả các nơi.

Sử dụng jQuery:

$('select').val();

Một giải pháp khác là:

document.getElementById('elementId').selectedOptions[0].value

Chạy ví dụ về cách thức hoạt động:

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

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

Lưu ý: Các giá trị không thay đổi khi danh sách thả xuống được thay đổi, nếu bạn yêu cầu chức năng đó thì thay đổi onClick sẽ được thực hiện.

Bạn có thể sử dụng querySelector.

Ví dụ

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

Tôi có một chút quan điểm khác nhau về cách đạt được điều này. Tôi thường làm điều này với cách tiếp cận sau (đây là một cách dễ dàng hơn và hoạt động với mọi trình duyệt theo như tôi biết):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

Trong năm 2015, trong Firefox , những điều sau đây cũng hoạt động.

e. tùy chọn .selected Index

Để đi cùng với các câu trả lời trước đây, đây là cách tôi thực hiện dưới dạng một lớp lót. Điều này là để có được văn bản thực tế của tùy chọn đã chọn. Có những ví dụ tốt để có được số chỉ mục. (Và đối với văn bản, tôi chỉ muốn thể hiện theo cách này)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

Trong một số trường hợp hiếm hoi, bạn có thể cần sử dụng dấu ngoặc đơn, nhưng điều này sẽ rất hiếm.

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

Tôi nghi ngờ quá trình này nhanh hơn phiên bản hai dòng. Tôi chỉ đơn giản là muốn củng cố mã của mình càng nhiều càng tốt.

Thật không may, điều này vẫn tìm nạp phần tử hai lần, điều này không lý tưởng. Một phương thức chỉ lấy phần tử một lần sẽ hữu ích hơn, nhưng tôi chưa tìm ra điều đó, liên quan đến việc thực hiện điều này với một dòng mã.

Đây là một dòng mã JavaScript:

var x = document.form1.list.value;

Giả sử rằng menu thả xuống có tên danh sách name="list"và được bao gồm trong một biểu mẫu với thuộc tính name name="form1".

Bạn nên sử dụng querySelectorđể đạt được điều này. Điều này cũng tiêu chuẩn hóa cách nhận giá trị từ các yếu tố hình thức.

var dropDownValue = document.querySelector('#ddlViewBy').value;

Câu đố: https://jsfiddle.net/3t80pubr/

Tôi không biết liệu tôi có phải là câu hỏi không, nhưng điều này chỉ hiệu quả với tôi: Sử dụng một sự kiện onchange () trong html của bạn, vd.

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// javascript

function sele(){
    var strUser = numberToSelect.value;
}

Điều này sẽ cung cấp cho bạn bất kỳ giá trị nào trong danh sách thả xuống được chọn cho mỗi lần nhấp

Cách đơn giản nhất để làm điều này là:

var value = document.getElementById("selectId").value;

Đây là một cách dễ dàng để làm điều đó trong một chức năng trao đổi:

event.target.options[event.target.selectedIndex].dataset.name

Cứ làm đi: document.getElementById('idselect').options.selectedIndex

Sau đó, bạn sẽ nhận được giá trị chỉ số, bắt đầu từ 0.

Thử

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

Tạo một menu thả xuống với một số tùy chọn (Nhiều như bạn muốn!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

Tôi làm một chút vui nhộn. Đây là đoạn mã:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

yay đoạn trích làm việc