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

Question

I am using Sublime and I want to connect a dropdown menu with an input text with html, css and javascript. 我正在使用Sublime，并且我想使用HTML，CSS和javascript将下拉菜单与输入文本连接起来。 So the user clicking on the dropdown menu must visualize in the text input the result. 因此，用户单击下拉菜单必须在输入的文本中可视化结果。 In this case if the user clicks on "italian" in the text input must see "italian" 在这种情况下，如果用户在文本输入中单击“意大利语”，则必须看到“意大利语”

I have written the code but it doesn't works: 我已经编写了代码，但是没有用：

<!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>

This is my javascript code: 这是我的JavaScript代码：

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

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

Can someone help me? 有人能帮我吗？

Answer 1

Add this function on change in your html code 在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>

And in your js file: 并在您的js文件中：

function myFunction{

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

Answer 2

well this can be a workaround 好吧，这可以解决

<!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>

Answer 3

Add a click listener on your <a> elements, children of #myDropdown 在您的<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>

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

问题描述

3 个解决方案

解决方案1
0 2016-10-02 15:10:59

解决方案2
0 2016-10-02 15:19:49

解决方案3
0 2016-10-02 15:28:36

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

问题描述

3 个解决方案

解决方案1 0 2016-10-02 15:10:59

解决方案2 0 2016-10-02 15:19:49

解决方案3 0 2016-10-02 15:28:36

解决方案1
0 2016-10-02 15:10:59

解决方案2
0 2016-10-02 15:19:49

解决方案3
0 2016-10-02 15:28:36