html select 下拉选择框标签案例应用

有勇气的牛排 902 前端 2021-08-26 21:57:34

知止自律打卡-微信小程序APP

一款微信自律打卡小程序，支持自定义打卡项目、习惯记录、项目日记、专注计时与数据统计。自律打卡、学习打卡、读书打卡、健身打卡、运动打卡、减肥打卡、戒色打卡、养生打卡、戒烟、戒酒、戒熬夜等多种场景。万能打卡模板自由创建。可自定义每日打卡目标，记录习惯连续天数，可视化追踪成长进度。

了解产品详情 →

微信搜索「知止自律打卡」

前言

<select> 标签在HTML中用于创建下拉菜单（下拉选择框）。它允许用户从多个选项中选择一个或多个值。通常，它与 <option> 标签一起使用来定义可供选择的选项。

案例

html

<select id="typeMode">
    <option value="utf8">utf8模式</option>
    <option value="GB232">GB232模式</option>
</select>
<button onclick="getSelectedType()">查看模式</button>

获取当前选择值

<script>
  function getSelectedType() {
    // 获取select元素
    let selectElement = document.getElementById('typeMode');
    // 获取当前选择的值
    let selectedValue = selectElement.value;
    console.log(`当前模式：${selectedValue}`)
  }
</script>

html select标签获取当前选择值

<h2><a id="_0"></a>前言</h2> <code><select></code> 标签在HTML中用于创建下拉菜单（下拉选择框）。它允许用户从多个选项中选择一个或多个值。通常，它与 <code><option></code> 标签一起使用来定义可供选择的选项。 <h2><a id="_4"></a>案例</h2> html <pre><div class="hljs"><code class="lang-html"><select id="typeMode"> <option value="utf8">utf8模式</option> <option value="GB232">GB232模式</option> </select> <button onclick="getSelectedType()">查看模式</button> </code></div></pre> 获取当前选择值 <pre><div class="hljs"><code class="lang-javascript"><script> function getSelectedType() { // 获取select元素 let selectElement = document.getElementById('typeMode'); // 获取当前选择的值 let selectedValue = selectElement.value; console.log(`当前模式：${selectedValue}`) } </script> </code></div></pre> <img src="https://www.couragesteak.com/tcos/article/5b5a6e2be13a65ef40aedf115633a913.png" alt="html select标签获取当前选择值" />

html select 下拉选择框 标签案例应用

前言

案例

评论区

html select 下拉选择框标签案例应用