HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>select val demo</title>

  <style>

    body { font-family: sans-serif; padding: 16px; max-width: 520px; }

    p { color: #dc2626; margin: 8px 0; }

    b { color: #2563eb; }

    select { margin: 4px 8px 4px 0; padding: 4px; }

  </style>

</head>

<body>

  <select id="single">

    <option>Single</option>

    <option>Single2</option>

  </select>

  <select id="multiple" multiple size="3">

    <option>Multiple</option>

    <option selected>Multiple2</option>

    <option selected>Multiple3</option>

  </select>

  <p id="out"></p>

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <script>

    function displayVals() {

      var singleValues = $("#single").val();

      var multipleValues = $("#multiple").val() || [];

      $("#out").html(

        "<b>Single:</b> " + singleValues +

        " <b>Multiple:</b> " + multipleValues.join(", ")

      );

    }

    $("select").on("change", displayVals);

    displayVals();

  </script>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery .val() — single and multi select (Try It)