使用脚本标签检查 html 中选择标签的值。代码如下答案

【问题标题】：Checking value of select tag in html using script tag.. Code is given below使用脚本标签检查 html 中选择标签的值。代码如下
【发布时间】：2021-12-31 06:26:30
【问题描述】：

在这段代码中，我想检查 html 中选择标记的下拉列表的值。并将其显示在 id='h1'(在底部).. 脚本标签已经存在于 head 标签中。请编写任何函数来推动 select 标签中的 onchange 属性。谢谢

<!DOCTYPE html>
<head>
   <script></script>
</head>
<body>
        <div class="navbar">
            <div class="title">
                <p><span style="font-size: 50px;">N</span>avya <span style="font-size: 50px;">M</span>alhotra</p>
            </div>
            <div class="main-menu">
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="products.html">Products</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="contact.html">Contact Us</a></li>
                
                </ul>
            </div>
            <div class="nav_links">
                <ul>
                    <li><a href="https://youtube.com"><img src="pics/Youtube.png" alt="The Source is down" style="height: 45px;"></a></li>
                    <li><a href="https://www.instagram.com/navya_malhotra_01/"><img src="pics/Instagram.png" alt="The Source is down" style="height: 33px;"></a></li>
                    <li style="margin-top: 32px;"><a href="https://facebook.com"><img src="pics/Facebook.png" alt="The Source is down" style="height: 29px;"></a></li>
                </ul>
            </div>
        </div>
        <p class="home_title"><span style="font-size: 40px;">C</span>ontact <span style="font-size: 40px;">U</span>s</p>    
        <form action="">
            <input type="text" id="" minlength="8" required/>
            <input type="email" required minlength="13"/>
            <input type="number" required minlength="10"/>
            <select class="dropdown" id="dropdown" onchange="" >
                <option value="feedback">Feedback</option>
                <option value="review">Review</option>
                <option value="query">Query</option>
                <option value="complain">Complaint</option>
                <option value="custom">Custom</option>
            </select>
            <input type="submit" name="" id=""/>
            <h1 id="h1"></h1>
        </form>     
    </body>
</html>

【问题讨论】：

标签： javascript html select return dropdown

【解决方案1】：

你需要使用简单的 js 函数，它将一个值插入到一个块中。校验码：

<script>
function setValue(option, el) {
    let element = document.getElementById(el);

    element.innerHTML = option;
}
</script>

<form action="">
  <select class="dropdown" id="dropdown" onchange="setValue(this.value, 'h1')" >
      <option value="feedback">Feedback</option>
      <option value="review">Review</option>
      <option value="query">Query</option>
      <option value="complain">Complaint</option>
      <option value="custom">Custom</option>
  </select>
  <h1 id="h1"></h1>
</form>

【讨论】：