Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

Question

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

I'm currently using Sublime and trying to link a dropdown menu with an input text using html, css, and javascript. When the user selects an option from the dropdown menu, I want the corresponding value to appear in the text input field. For example, if the user clicks on "italian" in the dropdown menu, the text input should display "italian".

Although I have written the code, it doesn't seem to be functioning as intended:

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

Below is the javascript code I've implemented:

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

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

If anyone could provide some assistance, it would be greatly appreciated.

javascript html css

Answer 1

Answer №1

To implement this feature in your HTML code, make sure to add the following function on change:

<div class="dropdown">
<button class="dropbtn" >Choose your preferred language</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="#">Spanish</a>
 </div>
</div>

Then, in your JavaScript file:

function myFunction{

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

Answer 2

To implement this feature in your HTML code, make sure to add the following function on change:

<div class="dropdown">
<button class="dropbtn" >Choose your preferred language</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="#">Spanish</a>
 </div>
</div>

Then, in your JavaScript file:

function myFunction{

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

Answer 3

Answer №2

Here is a possible solution:

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

Here is a possible solution:

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

Answer №3

Implement a click listener for all <a> elements that are descendants of the element with the ID #myDropdown

var links = document.getElementById('myDropdown').querySelectorAll('a');
    for (var i = 0; i < links.length; i++) {
      // Add click event listener
      links[i].addEventListener('click', function(){
        // Update input value with the content of the clicked link
        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>

Answer 6

Implement a click listener for all <a> elements that are descendants of the element with the ID #myDropdown

var links = document.getElementById('myDropdown').querySelectorAll('a');
    for (var i = 0; i < links.length; i++) {
      // Add click event listener
      links[i].addEventListener('click', function(){
        // Update input value with the content of the clicked link
        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>

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Discover a technique to display every individual "echo" statement from PHP in sequence, rather than waiting for the entire script to finish executing

What improvements does IE7 offer compared to IE6?

Is there a way to show text as symbols in Primeng components?

Angular: Navigating to another URL causes the page to revert back to the default route

How to Align Title in the Center of a Section Containing Multiple Images?

How can I add a blank selection at the bottom of my ng-options dropdown?

Connecting MySQL to HTML: Step-by-step guide

`Inability to remove item from array in Vue.js`

Creating a balanced height for child elements using CSS

Utilize Javascript to trigger AJAX refreshes only when necessary

Why is it that I am unable to utilize the post data stored in $var within my PHP document when making an Ajax call?

Is it possible to utilize Vue's splice method within a forEach loop in order to delete multiple elements at

Using External APIs in React: A Guide

Updating the parent's reference from a child component in Vue 3

Attempting to link two JavaScript files, however, only one of them is functioning correctly

Create a TypeScript function that can be called and has an extended prototype definition

What sets apart .create from .save in mongoose?

Unable to bring in Vue component from NPM module

Displaying geoJSON data from a variable instead of a file is a feature implemented by

Struggling with ensuring that Angular-JS pauses and waits for an asynchronous call to complete before moving on