gpt4 book ai didi

javascript - 如何使用 html 和 javascript 将下拉菜单与文本输入连接起来

转载 作者:行者123 更新时间:2023-11-28 05:06:08 25 4
gpt4 key购买 nike

我正在使用 Sublime,我想将下拉菜单与带有 html、css 和 javascript 的输入文本连接起来。因此,点击下拉菜单的用户必须在文本中可视化输入结果。在这种情况下,如果用户在文本输入中单击“意大利语”,则必须看到“意大利语”

我已经写了代码,但它不起作用:

<!DOCTYPE html>
<html>
<head>

<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<title>Calculators</title>
<body bgcolor="yellow">
<h1 style="color:red;">Calculators:</h1><br>

<p style="margin-left: 50px;">
<a href="C:\Users\ALBINO\Desktop\prove\calculator\index.html" target="_self">Example Calculator</a><br>
<a href="index2.html" target="_self">Italian Calculators</a><br>
<a href="http://web2.0calc.com/">Online Scientific Calculator</a>
</p>
<!--<script src="logic.js"></script> http://www.qatarstationery.com/image/cache/data/Calculator%20MJ100%20-%20Casio-900x900.jpeg-->

<div id="examplePicture" style="margin-left: 500px;">
<img src="http://i.ebayimg.com/00/$T2eC16NHJIkE9qU3jckhBRY0k-ob)!~~_35.JPG" />
</div>

<div class="dropdown">
<button onclick="myFunction() class="dropbtn" >Choose your favourite calculator</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">italian</a>
<a href="#">german</a>
<a href="#">brazilian</a>
<a href="#">french</a>
<a href="#">spaniard</a>
</div>
</div>

<input type="text" id="display" disabled><br>

<script src="homeJava.js"></script>

</body>
</html>

这是我的 javascript 代码:

var box = document.getElementById('display');

function myFunction() {
box.value += document.getElementById("myDropdown").classList.();
}

有人可以帮助我吗?

最佳答案

在您的 html 代码发生变化时添加此功能

<div class="dropdown">
<button class="dropbtn" >Choose your favourite calculator</button>
<div id="myDropdown" onchange="myFunction()" class="dropdown-content">
<a href="#">italian</a>
<a href="#">german</a>
<a href="#">brazilian</a>
<a href="#">french</a>
<a href="#">spaniard</a>
</div>
</div>

在你的 js 文件中:

function myFunction{

$("#myDropdown option:selected").each(function () {
getSelectedItem = $(this).val();
$("#display").val(getSelectedItem);
});
}

关于javascript - 如何使用 html 和 javascript 将下拉菜单与文本输入连接起来,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39818287/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com