Utilize JavaScript associative arrays to dynamically populate a dropdown menu, followed by automatically filling in a text

Question

Utilize JavaScript associative arrays to dynamically populate a dropdown menu, followed by automatically filling in a text

As a newcomer to Javascript (although I have a strong grasp of php), I'm experimenting with using associative arrays to accomplish two tasks.

The first task is successfully populating a dropdown menu:

var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length-1); i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

The 'fNames' variable consists of an array of strings sourced from a php array. Additionally, there is another array named 'fDesc' that is structured to align with the 'fNames' array as follows:

var fNames = ["aName", "bName", "cName"]
var fDesc = ["aDesc", "bDesc,", "cDesc"]

At present, these are distinct arrays rather than a single multidimensional array.

I am looking for a method to display "aDesc" in a text box upon selecting "aName" from the dropdown menu. How can this be achieved?

javascript arrays

Answer 1

Answer №1

To start, the for loop in this code is excluding the last element in the array unnecessarily. You should remove the -1 from (options.length-1)

Additionally, you need to add an event handler for the select.onchange and use indexOf to get the index of the selected item in the array.

Here is the HTML structure:

<select id='FName'></select>
<input id='AName' type='text'/>

And here is the JavaScript code:

var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc,", "cDesc"];
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length); i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

    select.onchange = function(){
        var textbox = document.getElementById('AName');
        textbox.value = fDesc[fNames.indexOf(select.value)];
    }

You can view the code on JsFiddle: http://jsfiddle.net/dBtUz/

Answer 2

To start, the for loop in this code is excluding the last element in the array unnecessarily. You should remove the -1 from (options.length-1)

Additionally, you need to add an event handler for the select.onchange and use indexOf to get the index of the selected item in the array.

Here is the HTML structure:

<select id='FName'></select>
<input id='AName' type='text'/>

And here is the JavaScript code:

var fNames = ["aName", "bName", "cName"];
var fDesc = ["aDesc", "bDesc,", "cDesc"];
var select = document.getElementById('FName');
var options = fNames;
for(var i = 0; i < (options.length); i++) {
    var opt = options[i];
    var el = document.createElement("option");
    el.textContent = opt;
    el.value = opt;
    select.appendChild(el);
}

    select.onchange = function(){
        var textbox = document.getElementById('AName');
        textbox.value = fDesc[fNames.indexOf(select.value)];
    }

You can view the code on JsFiddle: http://jsfiddle.net/dBtUz/

Answer 3

Answer №2

It is recommended to display aName as text and use aDesc as the value.

Markup

<select id='Fruit' onchange='fillInfo()'></select>
<input id='Description' type='text'/>

JavaScript

window.onload = function(){
    var fruits = ["Apple", "Banana", "Cherry"]
    var descriptions = ["aDesc", "bDesc", "cDesc"]
    var select = document.getElementById('Fruit');
    for(var i = 0; i < (fruits.length); i++) {
        var el = document.createElement("option");
        el.textContent = fruits[i];
        el.value = descriptions[i];
        select.appendChild(el);
    }
    select.selectedIndex = -1;
}

function fillInfo(){
    document.getElementById('Description').value = document.getElementById('Fruit').value;
}

Answer 4

It is recommended to display aName as text and use aDesc as the value.

Markup

<select id='Fruit' onchange='fillInfo()'></select>
<input id='Description' type='text'/>

JavaScript

window.onload = function(){
    var fruits = ["Apple", "Banana", "Cherry"]
    var descriptions = ["aDesc", "bDesc", "cDesc"]
    var select = document.getElementById('Fruit');
    for(var i = 0; i < (fruits.length); i++) {
        var el = document.createElement("option");
        el.textContent = fruits[i];
        el.value = descriptions[i];
        select.appendChild(el);
    }
    select.selectedIndex = -1;
}

function fillInfo(){
    document.getElementById('Description').value = document.getElementById('Fruit').value;
}

Answer 5

Answer №3

To retrieve the desired value from an array, you first need to find its index and then access that same position in the array.

Here is an enhanced solution with manual data input:

<script>

    document.addEventListener('DOMContentLoaded', onDomContentLoaded);

    // Data
    var fNames = ["John", "Doe", "Jane"];
    var fDesc = ["Engineer", "Accountant", "Doctor"];

    function onDomContentLoaded() {

        var mySelect = document.getElementById("mySelect");
        fillSelect(mySelect);

        mySelect.addEventListener('change', onSelectChange);
    }

    function fillSelect(mySelect) {
        for(var i = 0; i < (fNames.length); i++) {
            var opt = fNames[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            mySelect.appendChild(el);
        }
    }

    function onSelectChange(){

      var selectedValue = this.options[this.selectedIndex].value;

      var selectedValueIndexInArray = fNames.indexOf(selectedValue);
      var fieldOutput = document.getElementById("output");
      fieldOutput.innerHTML = fDesc[selectedValueIndexInArray];
    }

</script>

<select id="mySelect"></select>

<div id="output"></div>

See it in action here: http://jsfiddle.net/x92ka/4/

Answer 6

To retrieve the desired value from an array, you first need to find its index and then access that same position in the array.

Here is an enhanced solution with manual data input:

<script>

    document.addEventListener('DOMContentLoaded', onDomContentLoaded);

    // Data
    var fNames = ["John", "Doe", "Jane"];
    var fDesc = ["Engineer", "Accountant", "Doctor"];

    function onDomContentLoaded() {

        var mySelect = document.getElementById("mySelect");
        fillSelect(mySelect);

        mySelect.addEventListener('change', onSelectChange);
    }

    function fillSelect(mySelect) {
        for(var i = 0; i < (fNames.length); i++) {
            var opt = fNames[i];
            var el = document.createElement("option");
            el.textContent = opt;
            el.value = opt;
            mySelect.appendChild(el);
        }
    }

    function onSelectChange(){

      var selectedValue = this.options[this.selectedIndex].value;

      var selectedValueIndexInArray = fNames.indexOf(selectedValue);
      var fieldOutput = document.getElementById("output");
      fieldOutput.innerHTML = fDesc[selectedValueIndexInArray];
    }

</script>

<select id="mySelect"></select>

<div id="output"></div>

See it in action here: http://jsfiddle.net/x92ka/4/

Utilize JavaScript associative arrays to dynamically populate a dropdown menu, followed by automatically filling in a text

Answer №1

Answer №2

Answer №3

Similar questions

Effortlessly uploading large files using axios

Trouble with Bootstrap popover functionality

A distinctive noise is heard when hovering over multiple instances of a div

Tips for passing an object as an argument to a function with optional object properties in TypeScript

How can you store form field validation rules (for example, firstname.dirty) in an array within TypeScript in Angular?

The initial return value of $(document).height may be inaccurate, but is accurate upon recalculation

When using Material UI Autocomplete, the selected option should automatically be populated in the input field

Unusual behavior experienced with raycasting in Three JS when objects are are repositioned

Identifying a particular pattern in a JavaScript string

The Express JS route seems to be malfunctioning, as it is returning a 404 error for unknown reasons

What is the best way to simulate a constructor-created class instance in jest?

Creating a new database row dynamically with PHP, JavaScript, and AJAX

An error occurred when trying to set a cookie using Set-Cookie in a react application

Encountering a problem with load events in Firefox and Safari browsers

What is the best way to avoid adding duplicate HTML content to Bootstrap modal divs using jQuery?

Comparable to LINQ SingleOrDefault()

Altering the background color of a button in a navigation bar and mirroring that same color on a linked page when clicked

Use Material UI Grid to create a horizontal line design instead of focusing on making the

Creating an Angular directive that shares a single scope while displaying multiple behaviors

When a mobile device is rotated, the screen on a jQuery application will automatically shrink