jQuery 输出信息

Your changes have been saved!

New Blog Post

        <select name="CHOOSE TYPE" id="blogTypeInput">
            <option value="choose">CHOOSE TYPEoption>
            <option value="Public">Publicoption>
            <option value="Private">Privateoption>
        select>        

    <p class="blogContent-area">
        <label>Contentlabel>
        <textarea id="blogContentInput">textarea>
    p>
    <p>
        <button id="previewButton">Previewbutton>
    p>
div>

<div class="blogPreviewArea">
    <h2 id="blogTitlePreview">h2>

    <div id="blogContentPreview">div>
div>

<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8">script>
<script src="js/app.js" type="text/javascript" charset="utf-8">script>

$('#flashMessage').hide();

$('#previewButton').click(function() {
const title = $("#blogTitleInput").val();

const choose = $('#blogTypeInput option:selected').val(); //wk2 get the element

const content = $("#blogContentInput").val();

$("#blogTitlePreview").text(title);
$('#blogTypeInput option:selected').text(choose);
$("#blogContentPreview").html(content);

$("#flashMessage")
.slideDown(1000)
.delay(3000)
.slideUp();
});

如何把用jQuery 把 seletced option下拉菜单的 Public 或者 private输出到页面上。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <select name="CHOOSE TYPE" id="blogTypeInput">
        <option value="choose">CHOOSE TYPE</option>
        <option value="Public">Public</option>
        <option value="Private">Private</option>
    </select>

    <div id="chosetype"></div>
</body>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
    $("#blogTypeInput").on("change", function () {
        console.log("88")
        $("#chosetype").html($("#blogTypeInput").val());
    })






</script>

</html>

$("#blogTypeInput").change(function(){
    alert($(this).val());
});