how to connect a dropdown menu with a text input with html and javascript

Question

I am using Sublime and I want to connect a dropdown menu with an input text with html, css and 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:

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

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

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

 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>

how to connect a dropdown menu with a text input with html and javascript

Question

3 answers

solution1
0 2016-10-02 15:10:59

solution2
0 2016-10-02 15:19:49

solution3
0 2016-10-02 15:28:36

how to connect a dropdown menu with a text input with html and javascript

Question

3 answers

solution1 0 2016-10-02 15:10:59

solution2 0 2016-10-02 15:19:49

solution3 0 2016-10-02 15:28:36

solution1
0 2016-10-02 15:10:59

solution2
0 2016-10-02 15:19:49

solution3
0 2016-10-02 15:28:36