Using html & javascript Populate textbox

Question

My question is to populate textbox data using html & javascript:

I have 2 dropdown

1st dropdown contains Country 2nd dropdown contains Office location

After selecting 2 dropdowns the text box should be filled with respective manager name for that particular office location.

Dropdown 1
<label> Select Country: </label>
<select id="con">
<option>Germany</option>
<option>France</option>
<option>United Kingdom</option>
<select>
Dropdown 2
<label> Select Office location: </label>
<select id="loc">
<option>DE</option>
<option>FR</option>
<option>UK</option>
<select>
<label>ManagerName:</label><input type="text" value="" id="mgrid">

Output:

If Germany & DE selected ManagerName: Alex

If France & FR selected ManagerName: Louis

If United Kingdom & UK selected ManagerName: Michel

Thanks in advance

Answer 1

You can maintain an array of the manager's information from which you can select the name based on the value on the dropdowns:

 var managers = [ {country:'Germany', office:'DE', name:'Alex'}, {country:'France', office:'FR', name:'Louis'}, {country:'United Kingdom', office:'UK', name:'Michel'} ]; document.querySelectorAll('#con, #loc').forEach(function(sel){ sel.addEventListener('change',function(){ var conSel = document.querySelector('#con'); var conVal = conSel.options[conSel.selectedIndex].text; var locSel = document.querySelector('#loc'); var locVal = locSel.options[locSel.selectedIndex].text; var manager = managers.find(m => m.country == conVal && m.office == locVal); if(manager){ document.querySelector('#mgrid').value = manager.name; } else{ document.querySelector('#mgrid').value = ''; } }); })

 <label> Select Country: </label> <select id="con"> <option>Germany</option> <option>France</option> <option>United Kingdom</option> <select> <label> Select Office location: </label> <select id="loc"> <option>DE</option> <option>FR</option> <option>UK</option> <select> <label>ManagerName:</label><input type="text" value="" id="mgrid">

Answer 2

 const con = document.getElementById('con'); const loc = document.getElementById('loc'); const mgrid = document.getElementById('mgrid'); function selectChange() { if (con.value === 'Germany' && loc.value === 'DE') { mgrid.value = 'Alex'; } else if (con.value === 'France' && loc.value === 'FR') { mgrid.value = 'Louis'; } else if (con.value === 'United Kingdom' && loc.value === 'UK') { mgrid.value = 'Michel'; } }

 Dropdown 1 <label> Select Country: </label> <select id="con" onchange="selectChange()"> <option>Germany</option> <option>France</option> <option>United Kingdom</option> <select> Dropdown 2 <label> Select Office location: </label> <select id="loc" onchange="selectChange()"> <option>DE</option> <option>FR</option> <option>UK</option> <select> <label>ManagerName:</label> <input type="text" value="" id="mgrid">

Answer 3

The most simple solution is to use DOM manipulation. Just add id property for yours selectors and textbox.Than add appropriate event listeners. For more information check thease tutorials:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents

https://developer.mozilla.org/pl/docs/Web/API/EventTarget/addEventListener

I hope it'd help you:)

Answer 4

My suggestion:

 con.onchange = () => showName(), loc.onchange = () => showName(); const showName = () => { var manager; con.value === "Germany" && loc.value === "DE"? manager = "Alex": con.value === "France" && loc.value === "FR"? manager = "Louis": con.value === "United Kingdom" && loc.value === "UK" && (manager = "Michel"); mgrid.value = manager? manager: 'none'; };

 <label>Select Country:</label> <select id="con"> <option>Germany</option> <option>France</option> <option>United Kingdom</option> <select> <br> <label>Select Office location:</label> <select id="loc"> <option>DE</option> <option>FR</option> <option>UK</option> <select> <br> <label>ManagerName:</label> <input type="text" value="" id="mgrid">