Using html & javascript Populate textbox

user_9257942 0
Viewed 71

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

html javascript
4 Answers

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

user_74613810 

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

user_117435370
user_110411450

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

user_106680520
Related