Hướng dẫn javascript get all options from select - javascript lấy tất cả các tùy chọn từ lựa chọn

37

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi bị vấp ngã. Tôi có một biểu mẫu có danh sách thả xuống và tôi muốn lấy một danh sách tất cả các giá trị trong danh sách. Tôi đã lấy ví dụ dưới đây từ các trường W3 (vâng, tôi biết nó không đáng tin cậy, nhưng các giải pháp khác trên Stack Overflow dường như rất giống với điều này). Nó không hoạt động cho tôi, và tôi đã thử cắm nó vào JSfiddle, nhưng không có may mắn.

HTML:
<form>Select your favorite fruit:
    <select id="mySelect">
        <option value="a">Apple</option>
        <option value="o">Orange</option>
        <option value="p">Pineapple</option>
        <option value="b">Banana</option>
    </select>
</form>
<button type="button" onclick="displayResult()">Display text of all options</button>

javascript:

function displayResult() {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}

Không làm việc trên JSFiddle: http://jsfiddle.net/wfbrr/1/

Tuy nhiên, nó hoạt động tại trang web của họ: http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_text2

Bất kỳ ý tưởng về cách giải quyết này?

Isherwood

54,7K15 Huy hiệu vàng108 Huy hiệu bạc148 Huy hiệu đồng15 gold badges108 silver badges148 bronze badges

Hỏi ngày 7 tháng 8 năm 2013 lúc 20:46Aug 7, 2013 at 20:46

Bạn đã có hai vấn đề:

1) Thứ tự mà bạn bao gồm HTML. Hãy thử thay đổi danh sách thả xuống từ "onload" thành "Không bao bọc - đầu" trong cài đặt JavaScript của fiddle của bạn.

2) Hàm của bạn in các giá trị. Những gì bạn thực sự theo sau là văn bản

function displayResult() {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}

function displayResult() {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}

http://jsfiddle.net/WfBRr/5/

Đã trả lời ngày 7 tháng 8 năm 2013 lúc 20:50Aug 7, 2013 at 20:50

Áp -ra -ham Pabraham pAbraham P

14.5K12 Huy hiệu vàng57 Huy hiệu bạc124 Huy hiệu đồng12 gold badges57 silver badges124 bronze badges

0

example:

<select name="sel1" id="sel1">
    <option value="001">option 001</option>
    <option value="002">option 002</option>
    <option value="003">option 003</option>
    <option value="004">option 004</option>
</select>

values:

let selectElement = document.querySelectorAll('[name=sel1]');
let optionValues = [...selectElement[0].options].map(o => o.value)

Tùy chọn văn bản

let selectElement = document.querySelectorAll('[name=sel1]');
let optionNames = [...selectElement[0].options].map(o => o.text)

Đã trả lời ngày 18 tháng 4 năm 2021 lúc 22:56Apr 18, 2021 at 22:56

1

Change:

x.length

to:

x.options.length

Liên kết đến fiddle

Và tôi đồng ý với Áp -ra -ham - bạn có thể muốn sử dụng

function displayResult() {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}

function displayResult() {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}

Cập nhật lý do fiddle của bạn không hoạt động là vì bạn đã chọn tùy chọn: "onload" thay vì: "Không có bọc - trong"
The reason your fiddle didn't work was because you chose the option: "onLoad" instead of: "No wrap - in "

Đã trả lời ngày 7 tháng 8 năm 2013 lúc 20:52Aug 7, 2013 at 20:52

NIR Alfasinir AlfasiNir Alfasi

52.4K11 Huy hiệu vàng81 Huy hiệu bạc122 Huy hiệu đồng11 gold badges81 silver badges122 bronze badges

Theo cấu trúc DOM, bạn có thể sử dụng mã bên dưới:

var x = document.getElementById('mySelect');
     var txt = "";
     var val = "";
     for (var i = 0; i < x.length; i++) {
         txt +=x[i].text + ",";
         val +=x[i].value + ",";
      }

GAR

13.7K5 Huy hiệu vàng30 Huy hiệu bạc31 Huy hiệu đồng5 gold badges30 silver badges31 bronze badges

Đã trả lời ngày 2 tháng 10 năm 2013 lúc 5:00Oct 2, 2013 at 5:00

Dựa trên @Marek Lisiecki, tôi đã thực hiện một bản demo để trả lời câu hỏi này như dưới đây.

Tôi nghĩ rằng đây là cách tốt hơn khi sử dụng es6

function displayResult(){
  let selectElement = document.getElementById('mySelect');
  let optionNames = [...selectElement.options].map(o => o.text);
  console.log(optionNames);
}

function displayResult(){
  let selectElement = document.getElementById('mySelect');
  let optionNames = [...selectElement.options].map(o => o.text);
  console.log(optionNames);
}

function displayResult() {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}

Đã trả lời ngày 23 tháng 9 năm 2021 lúc 2:05Sep 23, 2021 at 2:05

Hien Nguyễn NguyễnHien Nguyen

23.6K7 Huy hiệu vàng49 Huy hiệu bạc55 Huy hiệu Đồng7 gold badges49 silver badges55 bronze badges

Có vẻ như việc đặt sự kiện nhấp trực tiếp vào nút đang gây ra vấn đề. Vì một số lý do, nó không thể tìm thấy chức năng. Không chắc chắn lý do tại sao...

Nếu bạn đính kèm trình xử lý sự kiện trong JavaScript, tuy nhiên nó sẽ hoạt động.

Xem nó ở đây: http://jsfiddle.net/wfbrr/7/

function displayResult() {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < x.length; i++) {
        txt = txt + "\n" + x.options[i].value;
    }
    alert(txt);
}

Đã trả lời ngày 7 tháng 8 năm 2013 lúc 20:52Aug 7, 2013 at 20:52

NIR Alfasinir AlfasiFuzzley

52.4K11 Huy hiệu vàng81 Huy hiệu bạc122 Huy hiệu đồng2 silver badges8 bronze badges

0

Làm thế nào để bạn nhận được tất cả các giá trị từ thả

Làm cách nào để nhận tất cả các giá trị được chọn của một hộp nhiều chọn?

Làm cách nào để nhận được giá trị tùy chọn đã chọn trong TypeScript?

Làm thế nào để tôi lặp lại thông qua các tùy chọn chọn trong jQuery?