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

MUI-Datatable rows that can be expanded

When styled with an id, the DIV element does not inherit styles from a CSS class

Using Node.js and MongoDB to filter a sub array within an array of objects

From HTML element to pug-template with the use of the # symbol

Tips for retrieving the xpath of elements within a div using python selenium

The only thing visible on my project is the homepage, void of any buttons or additional pages

Implementing a smooth transition for a never-ending CSS rotation animation upon clicking a different div with the help of jQuery

JavaScript code to change an array into a stringified format

How can I make the columns in Next.js / Tailwind expand horizontally first instead of vertically?

Encountered an issue with JSON serialization while using getServerSideProps in Next.js and TypeScript to retrieve products from the Stripe Payments API

Issue with displaying a vTable component in VueJS / Vuetify

What is the best way to add both the id and the full object to an array list at the

The request has been unsuccessful with error code 405 in Nextjs version 14

Background Services in the Moment

AngularJS directive ngShow not working properly

Is it possible to install the lib ldap-client module in node.js?

Completing the final touches on my jQuery typing enhancement feature

Sending files through ajax with php

Running Selenium tests are not able to initiate Javascript ajax requests

Is there a way to ensure that my text is centered on top of an image while maintaining responsiveness?