jQuery: 根据选择的选项 <Select> 输出不同的文本

Question

我想要基于所选选项的不同输出。

我想做的是如果选择的选项超出了选项2，我想输入条件。如果不是，请不要输入条件。

这是我的代码：

$(document).ready(function() {
  $('#title').html("Date 1 or 2");

  $('#select-date').change(function() {
    if ($('#select-date') > $('#select-date').is(':nth-child(2)')) {
      $('#title').html("Date 3 to 6");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div>
  <p id="title"></p>
  <select id="select-date">
    <option>Date 1</option>
    <option>Date 2</option>
    <option>Date 3</option>
    <option>Date 4</option>
    <option>Date 5</option>
    <option>Date 6</option>
  </select>
</div>

Answer 1

您可能想查看所选的选项

$("#select-date option:selected")

但使用基于 0 的 DOM selectedIndex 更简单。

当您使用 this 而不是 $(this) 时，您将获得基础 DOM object

我正在使用 so-called ternary 来设置标题的文本

$(function() {
  $('#select-date')
  .on("change", function() {
    $('#title').html(this.selectedIndex < 2 ? "Date 1 or 2" : "Date 3 to 6");
  })
  .change(); // initialise
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div>
  <p id="title"></p>
  <select id="select-date">
    <option>Date 1</option>
    <option>Date 2</option>
    <option>Date 3</option>
    <option>Date 4</option>
    <option>Date 5</option>
    <option>Date 6</option>
  </select>
</div>

jQuery: 根据选择的选项 <Select> 输出不同的文本

jQuery: Depending on the Selected Option of the <Select> Output a Different Text

javascript

html

jquery