Tùy chọn đã chọn JavaScript

Question

Nhận giá trị của một lựa chọn trong HTML là một câu hỏi khá lặp đi lặp lại. Tìm hiểu cách trả về giá trị và văn bản của danh sách thả xuống bằng JavaScript hoặc jQuery thuần túy

Nội dung chính Show

Cách lấy giá trị của một lựa chọn
Lấy giá trị của một lựa chọn với jQuery
Cách lấy văn bản của một lựa chọn
Loại JavaScript Select Element Demo
Select a JS Framework
Code language: HTML, XML (xml)0
Tài sản JavaScript Select Element Demo
Select a JS Framework
Code language: HTML, XML (xml)4
Tài sản JavaScript Select Element Demo
Select a JS Framework
Code language: HTML, XML (xml)9
Loại let selectedOption = selectBox.options[selectBox.selectedIndex];Code language: JavaScript (javascript)2
Làm cách nào để tạo một tùy chọn được chọn trong JavaScript?
Tùy chọn được chọn là gì?
Làm cách nào để kiểm tra xem một tùy chọn đã được chọn trong JavaScript chưa?
Làm cách nào để chọn JavaScript thả xuống tùy chọn?

Giả sử bạn có đoạn mã sau

Có hai mẩu thông tin chúng tôi có thể muốn nhận được trong trường hợp này

Giá trị của tùy chọn đã chọn
Văn bản của tùy chọn đã chọn

Cách lấy giá trị của một lựa chọn

Để lấy giá trị của một lựa chọn hoặc danh sách thả xuống trong HTML bằng cách sử dụng JavaScript thuần túy, trước tiên, chúng tôi lấy thẻ chọn, trong trường hợp này là theo id, sau đó chúng tôi lấy giá trị đã chọn thông qua thuộc tính selectIndex

var select = document.getElementById('language');
var value = select.options[select.selectedIndex].value;
console.log(value); // en

Giá trị "en" sẽ được in trên bảng điều khiển (Ctrl + Shift + J để mở bảng điều khiển)

Lấy giá trị của một lựa chọn với jQuery

$('#language').val(); // en

Cách lấy văn bản của một lựa chọn

Để lấy nội dung của một tùy chọn, nhưng không lấy giá trị, mã gần như giống nhau, chỉ cần lấy thuộc tính văn bản thay vì giá trị

Phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 cung cấp cho bạn một danh sách các tùy chọn. Phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 cho phép bạn chọn một hoặc nhiều tùy chọn

Để tạo phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1, bạn sử dụng phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 và

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

6. Ví dụ

________số 8_______

Phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 ở trên cho phép bạn chọn một tùy chọn tại một thời điểm

Để kích hoạt nhiều lựa chọn, bạn thêm thuộc tính

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

8 vào phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 như sau

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

Loại JavaScript Select Element Demo
Select a JS Framework
Code language: HTML, XML (xml)0

Để tương tác với phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 trong JavaScript, bạn sử dụng loại

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

0

Loại

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

0 có các thuộc tính hữu ích sau

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

4 – trả về chỉ số dựa trên số 0 của tùy chọn đã chọn.

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>



Code language: HTML, XML (xml)

4 là

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

6 nếu không có tùy chọn nào được chọn. Nếu phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 cho phép nhiều lựa chọn, thì

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

4 trả về

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của tùy chọn đầu tiên

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 – trả về thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của thành phần tùy chọn được chọn đầu tiên nếu có. Nếu không, nó trả về một chuỗi rỗng

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

8 – trả về

html>
<html>
<head>
    <title>JavaScript Selected Valuetitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select a JS Framework:label>
            <select id="framework">
                <option value="">Angularoption>
                <option value="1">Reactoption>
                <option value="2">Vue.jsoption>
                <option>Ember.jsoption>
            select>
            <button id="btn">Get the Selected Valuebutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(sb.value);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

3 nếu phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 cho phép nhiều lựa chọn. Nó tương đương với thuộc tính

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

8

Tài sản JavaScript Select Element Demo
Select a JS Framework
Code language: HTML, XML (xml)4

Để chọn một phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1, bạn sử dụng API DOM như

html>
<html>
<head>
    <title>JavaScript Selected Valuetitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select a JS Framework:label>
            <select id="framework">
                <option value="">Angularoption>
                <option value="1">Reactoption>
                <option value="2">Vue.jsoption>
                <option>Ember.jsoption>
            select>
            <button id="btn">Get the Selected Valuebutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(sb.value);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

8 hoặc

html>
<html>
<head>
    <title>JavaScript Selected Valuetitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select a JS Framework:label>
            <select id="framework">
                <option value="">Angularoption>
                <option value="1">Reactoption>
                <option value="2">Vue.jsoption>
                <option>Ember.jsoption>
            select>
            <button id="btn">Get the Selected Valuebutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(sb.value);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9

Ví dụ sau minh họa cách lấy chỉ mục của tùy chọn đã chọn

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

Làm thế nào nó hoạt động

Đầu tiên, chọn các phần tử

selectBox.options
Code language: CSS (css)

0 và

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 bằng cách sử dụng phương pháp

selectBox.options
Code language: CSS (css)

2

Sau đó, đính kèm trình xử lý sự kiện nhấp chuột vào nút và hiển thị chỉ mục đã chọn bằng phương thức
```
selectBox.options
Code language: CSS (css)
```
3 khi nút được nhấp

Tài sản JavaScript Select Element Demo
Select a JS Framework
Code language: HTML, XML (xml)9

Thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 phụ thuộc vào phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

6 và thuộc tính HTML

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

8 của nó

Nếu không có tùy chọn nào được chọn, thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>



Code language: HTML, XML (xml)

9 của hộp chọn là một chuỗi trống

Nếu một tùy chọn được chọn và có thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9, thì thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của hộp chọn là giá trị của tùy chọn đã chọn

Nếu một tùy chọn được chọn và không có thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9, thì thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của hộp chọn là văn bản của tùy chọn đã chọn

Nếu nhiều tùy chọn được chọn, thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của hộp chọn được lấy từ tùy chọn được chọn đầu tiên dựa trên hai quy tắc trước đó

Xem ví dụ sau

html>
<html>
<head>
    <title>JavaScript Selected Valuetitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select a JS Framework:label>
            <select id="framework">
                <option value="">Angularoption>
                <option value="1">Reactoption>
                <option value="2">Vue.jsoption>
                <option>Ember.jsoption>
            select>
            <button id="btn">Get the Selected Valuebutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(sb.value);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

trong ví dụ này

Nếu bạn chọn tùy chọn đầu tiên, thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 trống

Nếu bạn chọn tùy chọn cuối cùng, thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của hộp chọn là

const text = selectBox.options[1].text;
const value = selectBox.options[1].value;
Code language: JavaScript (javascript)

8 vì tùy chọn đã chọn không có thuộc tính

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9

Nếu bạn chọn tùy chọn thứ hai hoặc thứ ba, thuộc tính giá trị sẽ là

let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)

0hoặc

let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)

1

Loại let selectedOption = selectBox.options[selectBox.selectedIndex];Code language: JavaScript (javascript)2

Trong JavaScript, loại

let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)

2 đại diện cho phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

6

Loại

let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)

2 có các thuộc tính tiện dụng sau

let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)

6 – chỉ mục của tùy chọn bên trong bộ sưu tập các tùy chọn

let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)

7 – trả về

html>
<html>
<head>
    <title>JavaScript Selected Valuetitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select a JS Framework:label>
            <select id="framework">
                <option value="">Angularoption>
                <option value="1">Reactoption>
                <option value="2">Vue.jsoption>
                <option>Ember.jsoption>
            select>
            <button id="btn">Get the Selected Valuebutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(sb.value);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

3 khi tùy chọn được chọn. Bạn đặt thuộc tính này thành

html>
<html>
<head>
    <title>JavaScript Selected Valuetitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select a JS Framework:label>
            <select id="framework">
                <option value="">Angularoption>
                <option value="1">Reactoption>
                <option value="2">Vue.jsoption>
                <option>Ember.jsoption>
            select>
            <button id="btn">Get the Selected Valuebutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            alert(sb.value);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

3 để chọn một tùy chọn

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
Code language: JavaScript (javascript)

0 – trả về văn bản của tùy chọn

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 – trả về thuộc tính giá trị HTML

Phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 có thuộc tính

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;



Code language: JavaScript (javascript)

3 cho phép bạn truy cập các tùy chọn bộ sưu tập

selectBox.options
Code language: CSS (css)

Ví dụ: để truy cập vào

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
Code language: JavaScript (javascript)

0 và

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của tùy chọn thứ hai, bạn sử dụng cách sau

const text = selectBox.options[1].text;
const value = selectBox.options[1].value;
Code language: JavaScript (javascript)

Để có được tùy chọn đã chọn của phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 với một lựa chọn duy nhất, bạn sử dụng đoạn mã sau

let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)

Sau đó, bạn có thể truy cập vào

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
Code language: JavaScript (javascript)

0 và

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9 của tùy chọn đã chọn thông qua các thuộc tính

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
Code language: JavaScript (javascript)

0 và

html>
<html>
<head>
    <title>JavaScript Select Element Demotitle>
    <link href="css/selectbox.css" rel="stylesheet">
head>
<body>
    <form>
        <label for="framework">Select a JS Frameworklabel>
        <select id="framework">
            <option value="1">Angularoption>
            <option value="2">Reactoption>
            <option value="3">Vue.jsoption>
            <option value="4">Ember.jsoption>
        select>
        <button id="btn">Get the Selected Indexbutton>
    form>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework')
        btn.onclick = (event) => {
            event.preventDefault();
            // show the selected index
            alert(sb.selectedIndex);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

9

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
Code language: JavaScript (javascript)

Khi phần tử

<select id="framework" multiple>
    <option value="1">Angularoption>
    <option value="2">Reactoption>
    <option value="3">Vue.jsoption>
    <option value="4">Ember.jsoption>
select>
Code language: HTML, XML (xml)

1 cho phép nhiều lựa chọn, bạn có thể sử dụng thuộc tính

let selectedOption = selectBox.options[selectBox.selectedIndex];
Code language: JavaScript (javascript)

7 để xác định tùy chọn nào được chọn

html>
<html>
<head>
    <title>JavaScript Select Boxtitle>
    <link rel="stylesheet" href="css/selectbox.css">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select one or more JS Frameworks:label>
            <select id="framework" multiple>
                <option value="1">Angularoption>
                <option value="2">Reactoption>
                <option value="3">Vue.jsoption>
                <option value="4">Ember.jsoption>
            select>
            <button id="btn">Get Selected Frameworksbutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework');

        btn.onclick = (e) => {
            e.preventDefault();
            const selectedValues = [].filter
                .call(sb.options, option => option.selected)
                .map(option => option.text);
            alert(selectedValues);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

Trong ví dụ này,

html>
<html>
<head>
    <title>JavaScript Select Boxtitle>
    <link rel="stylesheet" href="css/selectbox.css">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select one or more JS Frameworks:label>
            <select id="framework" multiple>
                <option value="1">Angularoption>
                <option value="2">Reactoption>
                <option value="3">Vue.jsoption>
                <option value="4">Ember.jsoption>
            select>
            <button id="btn">Get Selected Frameworksbutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework');

        btn.onclick = (e) => {
            e.preventDefault();
            const selectedValues = [].filter
                .call(sb.options, option => option.selected)
                .map(option => option.text);
            alert(selectedValues);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

3 là một đối tượng dạng mảng, vì vậy nó không có các phương thức

html>
<html>
<head>
    <title>JavaScript Select Boxtitle>
    <link rel="stylesheet" href="css/selectbox.css">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select one or more JS Frameworks:label>
            <select id="framework" multiple>
                <option value="1">Angularoption>
                <option value="2">Reactoption>
                <option value="3">Vue.jsoption>
                <option value="4">Ember.jsoption>
            select>
            <button id="btn">Get Selected Frameworksbutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework');

        btn.onclick = (e) => {
            e.preventDefault();
            const selectedValues = [].filter
                .call(sb.options, option => option.selected)
                .map(option => option.text);
            alert(selectedValues);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

4 như đối tượng

html>
<html>
<head>
    <title>JavaScript Select Boxtitle>
    <link rel="stylesheet" href="css/selectbox.css">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select one or more JS Frameworks:label>
            <select id="framework" multiple>
                <option value="1">Angularoption>
                <option value="2">Reactoption>
                <option value="3">Vue.jsoption>
                <option value="4">Ember.jsoption>
            select>
            <button id="btn">Get Selected Frameworksbutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework');

        btn.onclick = (e) => {
            e.preventDefault();
            const selectedValues = [].filter
                .call(sb.options, option => option.selected)
                .map(option => option.text);
            alert(selectedValues);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

5

Để mượn các phương thức này từ đối tượng

html>
<html>
<head>
    <title>JavaScript Select Boxtitle>
    <link rel="stylesheet" href="css/selectbox.css">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select one or more JS Frameworks:label>
            <select id="framework" multiple>
                <option value="1">Angularoption>
                <option value="2">Reactoption>
                <option value="3">Vue.jsoption>
                <option value="4">Ember.jsoption>
            select>
            <button id="btn">Get Selected Frameworksbutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework');

        btn.onclick = (e) => {
            e.preventDefault();
            const selectedValues = [].filter
                .call(sb.options, option => option.selected)
                .map(option => option.text);
            alert(selectedValues);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

6, bạn sử dụng phương thức

html>
<html>
<head>
    <title>JavaScript Select Boxtitle>
    <link rel="stylesheet" href="css/selectbox.css">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select one or more JS Frameworks:label>
            <select id="framework" multiple>
                <option value="1">Angularoption>
                <option value="2">Reactoption>
                <option value="3">Vue.jsoption>
                <option value="4">Ember.jsoption>
            select>
            <button id="btn">Get Selected Frameworksbutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework');

        btn.onclick = (e) => {
            e.preventDefault();
            const selectedValues = [].filter
                .call(sb.options, option => option.selected)
                .map(option => option.text);
            alert(selectedValues);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

7. Ví dụ: phần sau trả về một mảng các tùy chọn đã chọn

[].filter.call(sb.options, option => option.selected)
Code language: PHP (php)

Và để lấy thuộc tính

const selectedText = selectedOption.text;
const selectedValue = selectedOption.value;
Code language: JavaScript (javascript)

0 của các tùy chọn, bạn xâu chuỗi kết quả của phương thức

html>
<html>
<head>
    <title>JavaScript Select Boxtitle>
    <link rel="stylesheet" href="css/selectbox.css">
head>
<body>
    <div id="container">
        <form>
            <label for="framework">Select one or more JS Frameworks:label>
            <select id="framework" multiple>
                <option value="1">Angularoption>
                <option value="2">Reactoption>
                <option value="3">Vue.jsoption>
                <option value="4">Ember.jsoption>
            select>
            <button id="btn">Get Selected Frameworksbutton>
        form>
    div>
    <script>
        const btn = document.querySelector('#btn');
        const sb = document.querySelector('#framework');

        btn.onclick = (e) => {
            e.preventDefault();
            const selectedValues = [].filter
                .call(sb.options, option => option.selected)
                .map(option => option.text);
            alert(selectedValues);
        };
    script>
body>
html>
Code language: HTML, XML (xml)

4 với phương thức

[].filter.call(sb.options, option => option.selected)
Code language: PHP (php)

0, như thế này

Làm cách nào để tạo một tùy chọn được chọn trong JavaScript?

Làm thế nào nó hoạt động

Chỉ mục- Chỉ mục của tùy chọn trong nhóm tùy chọn

Đã chọn- Nó trả về một giá trị thực nếu tùy chọn được chọn. Chúng tôi đặt thuộc tính đã chọn là true để chọn một tùy chọn

Văn bản- Nó trả về văn bản của tùy chọn

Giá trị- Nó trả về thuộc tính giá trị của HTML

Tùy chọn được chọn là gì?

Lựa chọn tùy chọn là một chiến thuật trong đó người chơi tận dụng các hệ thống ưu tiên đầu vào nhất định để xử lý nhiều tình huống khác nhau cùng một lúc từ cùng một đầu vào. Some Option Selects take advantage of Screen Freeze, others use the Input System, and some use proximity.

Làm cách nào để kiểm tra xem một tùy chọn đã được chọn trong JavaScript chưa?

Bạn có thể kiểm tra tùy chọn nào được chọn trong phần tử được chọn bằng cách sử dụng JavaScript bằng cách truy cập thuộc tính đã chọn của phần tử tùy chọn . Dưới đây là ví dụ về cách bạn có thể kiểm tra tùy chọn nào được chọn trong phần tử được chọn bằng ID mySelect.

Làm cách nào để chọn JavaScript thả xuống tùy chọn?

BƯỚC 1 – Tạo thẻ chọn với nhiều tùy chọn và gán id cho thẻ chọn. BƯỚC 2 – Ngoài ra, hãy tạo một DOM trống có id để hiển thị đầu ra. BƯỚC 3 – Tạo thành phần nút để người dùng nhấp và xem tùy chọn đã chọn. BƯỚC 4 – Cho phép người dùng chọn một tùy chọn từ danh sách thả xuống

programming javascript

Tùy chọn đã chọn JavaScript

Cách lấy giá trị của một lựa chọn

Lấy giá trị của một lựa chọn với jQuery

Cách lấy văn bản của một lựa chọn

Loại let selectedOption = selectBox.options[selectBox.selectedIndex];Code language: JavaScript (javascript)2

Làm cách nào để tạo một tùy chọn được chọn trong JavaScript?

Tùy chọn được chọn là gì?

Làm cách nào để kiểm tra xem một tùy chọn đã được chọn trong JavaScript chưa?

Làm cách nào để chọn JavaScript thả xuống tùy chọn?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội