Choose a different option when there is a change

Question

Choose a different option when there is a change

Here is an example of JSON data:

[{
        "user_id": "113",
        "employe_first_name": "Asaladauangkitamakan",
        "employe_last_name": "Nasibb"
    }, {
        "user_id": "105",
        "employe_first_name": "Ryan",
        "employe_last_name": "Friday"
    }, {
        "user_id": "87",
        "employe_first_name ":"hendi ",
        "employe_last_name ":"kenther"
    }
]

How can I dynamically create a select dropdown with JavaScript where the option value is the user_id and text is the employe_first_name, then load this when the document is ready? Additionally, how do I fill another field with the selected value from the dropdown?

javascript ajax

Answer 1

Answer №1

let employees = [ {"user_id":"113","employe_first_name":"Asaladauangkitamakan","employe_last_name":"Nasibb"}, {"user_id":"105","employe_first_name":"Ryan","employe_last_name":"Friday"},   {"user_id":"87","employe_first_name":"hendi","employe_last_name":"kenther"} ];
let selectMenu = document.createElement("select");
for(let i = 0; i < employees.length; i++){
    let option = document.createElement("option");
    option.value = employees[i].user_id;
    option.innerHTML = employees[i].employe_first_name;
    selectMenu.appendChild(option);
}
selectMenu.addEventListenter("change", function(event) {
    let selectedValue = event.target.value;
    document.getElementById("another_field").value = selectedValue;
});
someDiv.appendChild(selectMenu); // Append the select menu to the DOM

Answer 2

let employees = [ {"user_id":"113","employe_first_name":"Asaladauangkitamakan","employe_last_name":"Nasibb"}, {"user_id":"105","employe_first_name":"Ryan","employe_last_name":"Friday"},   {"user_id":"87","employe_first_name":"hendi","employe_last_name":"kenther"} ];
let selectMenu = document.createElement("select");
for(let i = 0; i < employees.length; i++){
    let option = document.createElement("option");
    option.value = employees[i].user_id;
    option.innerHTML = employees[i].employe_first_name;
    selectMenu.appendChild(option);
}
selectMenu.addEventListenter("change", function(event) {
    let selectedValue = event.target.value;
    document.getElementById("another_field").value = selectedValue;
});
someDiv.appendChild(selectMenu); // Append the select menu to the DOM

Answer 3

Answer №2

Give this a shot:

const employeeData = [ {"user_id":"113","employe_first_name":"Asaladauangkitamakan","employe_last_name":"Nasibb"}, {"user_id":"105","employe_first_name":"Ryan","employe_last_name":"Friday"},   {"user_id":"87","employe_first_name":"hendi","employe_last_name":"kenther"} ];
var select = document.createElement("select");
for(let i = 0; i < employeeData.length; i++){
    let option = document.createElement("option");
    option.value = employeeData[i].user_id;
    option.innerHTML = employeeData[i].employe_first_name;
    select.appendChild(option);
}

Check out the DEMO

Answer 4

Give this a shot:

const employeeData = [ {"user_id":"113","employe_first_name":"Asaladauangkitamakan","employe_last_name":"Nasibb"}, {"user_id":"105","employe_first_name":"Ryan","employe_last_name":"Friday"},   {"user_id":"87","employe_first_name":"hendi","employe_last_name":"kenther"} ];
var select = document.createElement("select");
for(let i = 0; i < employeeData.length; i++){
    let option = document.createElement("option");
    option.value = employeeData[i].user_id;
    option.innerHTML = employeeData[i].employe_first_name;
    select.appendChild(option);
}

Check out the DEMO

Answer 5

Answer №3

consider trying a similar approach

// executing on DOM load
var tid = setInterval( function () {
    if ( document.readyState !== 'complete' ) return;
    clearInterval( tid );       
    var json_len = json.length;
    var select = document.getElementById('select_id');
    for(var i=0;i<json_len;i++){
        var option = document.createElement('option');
        option.innerHTML = json[i].employe_first_name;
        option.value = json[i].user_id;
        select.appendChild(option);
    }
}, 100 );

REFERENCE

Is there a way to check document.ready() if jQuery is not available?

Answer 6

consider trying a similar approach

// executing on DOM load
var tid = setInterval( function () {
    if ( document.readyState !== 'complete' ) return;
    clearInterval( tid );       
    var json_len = json.length;
    var select = document.getElementById('select_id');
    for(var i=0;i<json_len;i++){
        var option = document.createElement('option');
        option.innerHTML = json[i].employe_first_name;
        option.value = json[i].user_id;
        select.appendChild(option);
    }
}, 100 );

REFERENCE

Is there a way to check document.ready() if jQuery is not available?

Answer 7

Answer №4

If you're looking to incorporate jQuery into your project, here's one way to do it.

Make sure to replace selectId with the actual ID of your dropdown element.

 var employeeData = [{
        "user_id": "113",
        "employe_first_name": "Asaladauangkitamakan",
        "employe_last_name": "Nasibb"
    }, {
        "user_id": "105",
        "employe_first_name": "Ryan",
        "employe_last_name": "Friday"
    }, {
        "user_id": "87",
        "employe_first_name": "hendi ",
        "employe_last_name": "kenther"
    }
];
    var dropdownElement = $("selectId");
    $(employeeData).each(function() {
        $("<option value='" + this.user_id + "'>" + this.employe_first_name + "</option>").appendTo($(dropdownElement));
    });

Answer 8

If you're looking to incorporate jQuery into your project, here's one way to do it.

Make sure to replace selectId with the actual ID of your dropdown element.

 var employeeData = [{
        "user_id": "113",
        "employe_first_name": "Asaladauangkitamakan",
        "employe_last_name": "Nasibb"
    }, {
        "user_id": "105",
        "employe_first_name": "Ryan",
        "employe_last_name": "Friday"
    }, {
        "user_id": "87",
        "employe_first_name": "hendi ",
        "employe_last_name": "kenther"
    }
];
    var dropdownElement = $("selectId");
    $(employeeData).each(function() {
        $("<option value='" + this.user_id + "'>" + this.employe_first_name + "</option>").appendTo($(dropdownElement));
    });

Choose a different option when there is a change

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Utilize lodash to trim the object key

Grabbing only the button element using jQuery when a click event occurs

Experiencing issues while trying to publish on Cloudflare Workers?

Trouble with Mocha async hooks execution?

Transform your standard HTML buttons into a collective of radio buttons

I need to display 5 columns in a parent component, each with its own unique icon. How can I conditionally render them in a React component?

Leveraging a factory value within another factory in AngularJS

JavaScript in IE/Edge may not run correctly if it is loaded from the cache

As soon as I closed the modal, I noticed that the checked inputs reverted back to

What is the process for importing the TokenExpiredError that is thrown by the verify function in jsonwebtoken?

Guide to setting up Gatsby CLI and Gatsby version 2

What is the best way to automatically remove a Firebase database entry when a user has been inactive for a period of time, without logging out but simply not accessing the page for an extended duration?

Whenever I execute the code, my if statement seems to interpret the conditions as true regardless of the actual values

Sending query strings to jQuery load

Set iframe scroll to match the height of the user's screen resolution

Leveraging the combination of <Form>, jQuery, Sequelize, and SQL for authentication and navigation tasks

Implement a function in JavaScript to sum quantities for identical JSON objects

What is the best way to organize products based on the proximity of users using MongoDB's Geospatial Queries

What causes the "Error: method not allowed" message to appear when attempting to send a "DELETE" request from a Next Js component? (The POST method is

Is it possible for npm to assist in determining the appropriate version of Primeng that is compatible with Angular 16 dependencies