在html中利用JS实现登录密码框下拉菜单
时间: 2023-06-19 09:05:26 浏览: 55
可以使用HTML中的`<select>`元素和JS中的`onchange`事件来实现登录密码框下拉菜单。
以下是一个简单的示例代码:
```html
<label for="password">密码:</label>
<select id="password" onchange="showPassword()">
<option value="password1">password1</option>
<option value="password2">password2</option>
<option value="password3">password3</option>
</select>
<script>
function showPassword() {
var password = document.getElementById("password").value;
document.getElementById("passwordInput").value = password;
}
</script>
```
在这个示例中,我们创建了一个`<select>`元素,并为其设置了三个选项。当用户选择其中一个选项时,会触发`onchange`事件,调用`showPassword()`函数。
`showPassword()`函数获取当前选中的密码,并将其设置为登录密码框的值。为了实现这一点,我们给登录密码框设置了一个`id`属性为`passwordInput`,并在JS中通过`document.getElementById("passwordInput")`获取该元素的引用。
你可以根据自己的需求调整代码,例如添加更多选项、修改密码框的样式等。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)