![](/img/trans.png)
[英]Passing HTML dropdown-menu values to HTML input through Javascript
[英]how to connect a dropdown menu with a text input with html and javascript
我正在使用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);
});
}
好吧,这可以解决
<!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 class="dropbtn" >Choose your favourite calculator</button>
<div id="myDropdown" class="dropdown-content">
<a onclick="myFunction('italian')">italian</a>
<a onclick="myFunction('german')">german</a>
<a onclick="myFunction('brazilian')">brazilian</a>
<a onclick="myFunction('french')">french</a>
<a onclick="myFunction('spaniard')">spaniard</a>
</div>
</div>
<input type="text" id="display" disabled><br>
<script>
var box = document.getElementById('display');
function myFunction(text) {
box.value = text;
}
</script>
</body>
</html>
在您的<a>
元素( #myDropdown的子元素)上添加点击监听器
var a = document.getElementById('myDropdown').querySelectorAll('a'); for (var i = 0; i < a.length; i++) { // Set listener a[i].addEventListener('click', function(){ // On click, set the input value with the <a> content document.getElementById('display').value = this.innerHTML; }); }
<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> <input type="text" id="display" disabled><br>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.