Позвольте мне сначала объяснить, что я хочу, чтобы произошло.
У меня есть 2 кнопки обзора для команды и страны. Всякий раз, когда пользователь нажимает любую из кнопок обзора, список команды или страны будет отображаться в другой форме. Когда форма появляется или активна, страница должна фокусироваться только на форме. Только когда пользователь выбирает из списка или отменяет выбор, он сможет сосредоточиться на основной форме. Я хочу, чтобы это было так же, как в Facebook, когда ты предлагаешь друзей другу.
Я бы посоветовал вам запустить мой код, чтобы вы могли видеть, что я пытаюсь сделать.
index.html
<html>
<head>
<script type="text/javascript">
function hideBrowseOption (optionId) {
document.getElementById(optionId).style.display = 'none';
}
function showBrowseOption (optionId) {
document.getElementById(optionId).style.display = '';
}
function selectTeam (teamId) {
document.getElementById('fpTeamTxt').value = document.getElementById(teamId).innerHTML;
document.getElementById('optionTeam').style.display = 'none';
}
function selectCountry (countryId) {
document.getElementById('fpCountryTxt').value = document.getElementById(countryId).innerHTML;
document.getElementById('optionCountry').style.display = 'none';
}
</script>
</head>
<body onload="hideBrowseOption ('optionTeam'); hideBrowseOption ('optionCountry');">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" id="fpNameTxt" name="fpNameTxt">
</td>
</tr>
<tr>
<td>Team:</td>
<td>
<input type="text" id="fpTeamTxt" name="fpTeamTxt">
<input type="button" id="fpTeamBrowse" name="fpTeamBrowse" value="Browse" onclick="showBrowseOption ('optionTeam')">
</td>
</tr>
<tr>
<td>Country:</td>
<td>
<input type="text" id="fpCountryTxt" name="fpCountryTxt">
<input type="button" id="fpCountryBrowse" name="fpCountryBrowse" value="Browse" onclick="showBrowseOption ('optionCountry')">
</td>
</tr>
</table>
<div id="optionTeam">
<table>
<tr>
<td id="team1">FC Bayern</td>
<td><input type="button" value="Select" onclick="selectTeam ('team1');"> </td>
</tr>
<tr>
<td id="team2">Real Madrid</td>
<td><input type="button" value="Select" onclick="selectTeam ('team2');"> </td>
</tr>
<tr>
<td id="team3">FC Barcelona</td>
<td><input type="button" value="Select" onclick="selectTeam ('team3');"> </td>
</tr>
<tr>
<td id="team4">Manchester United</td>
<td><input type="button" value="Select" onclick="selectTeam ('team4');"> </td>
</tr>
<tr>
<td id="team5">Santos</td>
<td><input type="button" value="Select" onclick="selectTeam ('team5');"> </td>
</tr>
<tr>
<td id="team6">AC Milan</td>
<td><input type="button" value="Select" onclick="selectTeam ('team6');"> </td>
</tr>
</table>
<input type="button" value="Cancel" onclick="hideBrowseOption ('optionTeam');" >
</div>
<div id="optionCountry">
<table>
<tr>
<td id="country1">Germany</td>
<td><input type="button" value="Select" onclick="selectCountry ('country1');"> </td>
</tr>
<tr>
<td id="country2">Portugal</td>
<td><input type="button" value="Select" onclick="selectCountry ('country2');"> </td>
</tr>
<tr>
<td id="country3">Spain</td>
<td><input type="button" value="Select" onclick="selectCountry ('country3');"> </td>
</tr>
<tr>
<td id="country4">England</td>
<td><input type="button" value="Select" onclick="selectCountry ('country4');"> </td>
</tr>
<tr>
<td id="country5">Brazil</td>
<td><input type="button" value="Select" onclick="selectCountry ('country5');"> </td>
</tr>
<tr>
<td id="country6">Italy</td>
<td><input type="button" value="Select" onclick="selectCountry ('country6');"> </td>
</tr>
</table>
<input type="button" value="Cancel" onclick="hideBrowseOption ('optionCountry');" >
</div>
</body>
</html>
ПРИМЕЧАНИЕ. Я хочу сделать это, используя собственный javascript.
Мне действительно нужна твоя помощь. Заранее спасибо.