使用 html & javascript 填充文本框

Question

我的問題是使用 html 和 javascript 填充文本框數據：

我有 2 個下拉菜單

第一個下拉列表包含國家/地區第二個下拉列表包含辦公室位置

選擇 2 個下拉菜單后，文本框應填寫該特定辦公室位置的相應經理姓名。

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：

如果 Germany & DE 選擇ManagerName: Alex

如果 France & FR 選擇ManagerName: Louis

如果英國和英國選擇了經理姓名：Michel

提前致謝

Answer 1

您可以維護經理信息的數組，您可以從中根據下拉列表中的值 select 名稱：

 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

最簡單的解決方案是使用 DOM 操作。 只需為您的選擇器和文本框添加 id 屬性。然后添加適當的事件偵聽器。 有關更多信息，請查看這些教程：

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

我希望它會幫助你:)

Answer 4

我的建議：

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