Câu hỏi Lấy giá trị đã 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ả đề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;
var value = document.getElementById("ddlViewBy").value;

1374
2017-07-06 07:25


gốc




Các câu trả lời:


Nếu bạn có phần tử chọn giống như sau:

<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 đó thực hiện việc này:

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

Mà sẽ làm cho strUser được test2


2336
2017-07-06 07:29



@ R11G, sử dụng onchange :) - AlexJaa
var strUser = e.options[e.selectedIndex].value; tại sao không chỉ var strUser = e.value ? - The Red Pea
@ TheRedPea - có lẽ bởi vì khi câu trả lời này được viết thì có một cơ hội (tuy nhiên từ xa) rằng một phiên bản Netscape Navigator cổ xưa cần được cung cấp, vì vậy phương pháp cổ xưa để truy cập giá trị của một lựa chọn duy nhất đã được sử dụng. Nhưng tôi chỉ đoán về điều đó. ;-) - RobG
Làm thế nào nó hoạt động cho nhiều lựa chọn? - Rishi Dua
Tôi đã sử dụng như thế này: var e = document.getElementById("ddlViewBy").value; - Fathur Rohim


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").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'
}];

281
2017-12-18 02:08



Tôi phải làm điều gì sai vì khi tôi thử điều này, tôi lấy lại văn bản của mọi tùy chọn trong trình đơn thả xuống. - Kevin
Điều này đã làm việc cho tôi theo cách khác. $ ("# ddlViewBy: selected"). val () không phải không được chọn - Ruwantha
element.options[e.selectedIndex].value cần phải element.options[element.selectedIndex].value - Christopher
Vẫn hữu ích - cảm ơn bạn đã viết ra các biến thể / ngôn ngữ! Bây giờ nếu tôi chỉ biết tương đương với Office JS API Dropdown ... - Cindy Meister


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ị. Đây có phải là văn bản bạn đang theo dõi không?

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ị = hello
  • Văn bản = Hello World

156
2017-07-06 07:29



tôi nghĩ rằng ".value" trong javascript sẽ trả về giá trị cho tôi nhưng chỉ ".text" sẽ trả về như những gì .SelectedValue trong asp.net trả về. Cảm ơn ví dụ cho! - Fire Hand
Đúng - làm cho giá trị của tùy chọn giống với tùy chọn. Đơn giản - anh chàng trên cần viết thêm mã để bù đắp cho sự mơ hồ ban đầu của mình. - Andrew Koper


Đoạn mã sau đây trình bày các ví dụ khác nhau liên quan đến việc nhận / đưa các giá trị từ các trường đầu vào / chọn bằng cách sử dụng JavaScript.

Đang làm việc BẢN GIỚI THIỆU

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

Tập lệnh sau đây gọi một hàm từ một hàm

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

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

47
2017-12-03 06:50





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

21
2017-10-25 13:27





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

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

Chạy trên Firefox và cộng sự sẽ cung cấp cho bạn một lỗi 'không phải là một hàm' vì IE cho phép bạn thoát khỏi bằng cách 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.


18
2018-06-18 15:28





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

12
2018-04-14 13:45





Chỉ dùng

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

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


11
2018-02-18 11:01



Điều này sử dụng jQuery, không trả lời câu hỏi của OP. - David Meza


Người mới bắt đầu có khả năng muốn truy cập các giá trị từ một lựa chọn có 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 họ nhận được id.

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

NB. tên cho các phần tử 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 phần tử. 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 phần tử biểu mẫu my_nth_select_named_x và 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;

11
2018-03-09 03:32



Không hoạt động nếu my_select_with_name_ddlViewBy là một mảng như my_select_with_name_ddlViewBy [] - zeuf


Các câu trả lời trước vẫn để lại chỗ cho cải tiến vì khả năng, tính trực giác của mã, và việc sử dụng id đấu với name. Người ta có thể nhận được một đọc ba dữ liệu của một lựa chọn được lựa chọn - số chỉ mục của nó, giá trị của nó 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 thử trực tiếp: http://jsbin.com/jiwena/1/edit?html,output .

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


7
2018-05-22 02:42





Tham khảo bài viết Chọn phần tử thả xuống bằng JavaScript hoặc jQuery. Họ đã giải thích nó bằng nhiều cách sử dụng JavaScript và jQuery.

Sử dụng jQuery:

$(‘select’).val();

6
2018-05-25 18:42