Javascript nếu tùy chọn chọn được chọn

Thuộc tính chỉ đọc HTMLSelectElement selectedOptions chứa danh sách các phần tử có trong phần tử hiện đang được chọn. Danh sách các tùy chọn đã chọn là một đối tượng HTMLCollection với một mục cho mỗi tùy chọn hiện được chọn

Nội dung chính Show

• Làm cách nào để biết liệu một tùy chọn lựa chọn có được chọn hay không?
• Làm cách nào tôi có thể hiển thị một div ẩn khi một tùy chọn đã chọn được chọn?
• Tôi có thể sử dụng DIV trong thẻ chọn không?
• Cái gì được chọn trong JavaScript?

Một tùy chọn được coi là đã chọn nếu nó có thuộc tính

let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");

orderButton.addEventListener("click", () => {
  let collection = itemList.selectedOptions;
  let output = "";

  for (let i = 0; i < collection.length; i++) {
    if (output === "") {
      output = "Your order for the following items has been placed: ";
    }
    output += collection[i].label;

    if (i === (collection.length - 2) && (collection.length < 3)) {
      output +=  " and ";
    } else if (i < (collection.length - 2)) {
      output += ", ";
    } else if (i === (collection.length - 2)) {
      output += ", and ";
    }
  }

  if (output === "") {
    output = "You didn't order anything!";
  }

  outputBox.innerHTML = output;
}, false);

0

Giá trị

Một HTMLCollection liệt kê mọi

let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");

orderButton.addEventListener("click", () => {
  let collection = itemList.selectedOptions;
  let output = "";

  for (let i = 0; i < collection.length; i++) {
    if (output === "") {
      output = "Your order for the following items has been placed: ";
    }
    output += collection[i].label;

    if (i === (collection.length - 2) && (collection.length < 3)) {
      output +=  " and ";
    } else if (i < (collection.length - 2)) {
      output += ", ";
    } else if (i === (collection.length - 2)) {
      output += ", and ";
    }
  }

  if (output === "") {
    output = "You didn't order anything!";
  }

  outputBox.innerHTML = output;
}, false);

2 hiện được chọn là con của HTMLSelectElement hoặc của một

let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");

orderButton.addEventListener("click", () => {
  let collection = itemList.selectedOptions;
  let output = "";

  for (let i = 0; i < collection.length; i++) {
    if (output === "") {
      output = "Your order for the following items has been placed: ";
    }
    output += collection[i].label;

    if (i === (collection.length - 2) && (collection.length < 3)) {
      output +=  " and ";
    } else if (i < (collection.length - 2)) {
      output += ", ";
    } else if (i === (collection.length - 2)) {
      output += ", and ";
    }
  }

  if (output === "") {
    output = "You didn't order anything!";
  }

  outputBox.innerHTML = output;
}, false);

1 trong phần tử

Nói cách khác, bất kỳ tùy chọn nào có trong phần tử có thể là một phần của kết quả, nhưng các nhóm tùy chọn không được bao gồm trong danh sách

Nếu không có tùy chọn nào hiện được chọn, bộ sưu tập trống và trả về

let orderButton = document.getElementById("order");
let itemList = document.getElementById("foods");
let outputBox = document.getElementById("output");

orderButton.addEventListener("click", () => {
  let collection = itemList.selectedOptions;
  let output = "";

  for (let i = 0; i < collection.length; i++) {
    if (output === "") {
      output = "Your order for the following items has been placed: ";
    }
    output += collection[i].label;

    if (i === (collection.length - 2) && (collection.length < 3)) {
      output +=  " and ";
    } else if (i < (collection.length - 2)) {
      output += ", ";
    } else if (i === (collection.length - 2)) {
      output += ", and ";
    }
  }

  if (output === "") {
    output = "You didn't order anything!";
  }

  outputBox.innerHTML = output;
}, false);

4 của 0

ví dụ

Trong ví dụ này, một phần tử

với một số tùy chọn được sử dụng để cho phép người dùng đặt các mặt hàng thực phẩm khác nhau

<label for="foods">What do you want to eat?label><br />
<select id="foods" name="foods" size="7" multiple>
  <option value="1">Burritooption>
  <option value="2">Cheeseburgeroption>
  <option value="3">Double Bacon Burger Supremeoption>
  <option value="4">Pepperoni Pizzaoption>
  <option value="5">Tacooption>
select>
<br />
<button name="order" id="order">Order Nowbutton>
<p id="output">p>