#javascript #html
Вопрос:
Итак, у меня есть div , в котором я могу отображать при input нажатии кнопки.
<div class="select-list">
<select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
<option value="">Choose</option>
<option value="Son">Son</option>
<option value="Daughter">Daughter</option>
<option value="Other Relative">Other Relative</option>
<option value="Other">Other</option>
</select>
<span class="highlight"></span>
<span class="bar"></span>
</div>
</div>
<script>
function otherFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
console.log(selectedValue)
if (selectedValue == "Other") {
document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
} else {
}
}
</script>
<div id="other"></div> однако теперь я хочу изменить его, чтобы, если кто-то нажмет Other , но затем изменит его обратно на любой другой параметр, он снова скроет этот div <div id="other"></div> . Как я могу это сделать?
Комментарии:
1. укажите идентификатор div и в блоке else запросите div, используя идентификатор, и удалите его
2. Вы также можете переключать стили, такие как видимость, отображение и т.д., вместо удаления / добавления
3. @RameshReddy есть ли какой-нибудь способ, которым вы могли бы показать мне, как это сделать? Я не уверен, что знаю, как делать то, о чем вы говорите
4. вы можете просто установить
document.getElementById("other").innerHTML = ''в блоке else
Ответ №1:
Решение № 1 сохранение исходного кода
function otherFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
console.log(selectedValue)
if (selectedValue == "Other") {
document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
} else {
document.getElementById("other").innerHTML = '';
}
} <div class="select-list">
<select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
<option value="">Choose</option>
<option value="Son">Son</option>
<option value="Daughter">Daughter</option>
<option value="Other Relative">Other Relative</option>
<option value="Other">Other</option>
</select>
<span class="highlight"></span>
<span class="bar"></span>
</div>
<div id="other"></div> Решение # 2 Вы также можете сделать это
var other = document.getElementById('other');
other.style.display = 'none';
function otherFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
console.log(selectedValue)
if (selectedValue == "Other") {
other.style.display = 'block';
} else {
other.style.display = 'none';
document.getElementById('otherInput').value = '';
}
} <div class="select-list">
<select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
<option value="">Choose</option>
<option value="Son">Son</option>
<option value="Daughter">Daughter</option>
<option value="Other Relative">Other Relative</option>
<option value="Other">Other</option>
</select>
<span class="highlight"></span>
<span class="bar"></span>
</div>
<div id="other">
<div class="group">
<div class="col-25">
<label>Please clarify if "Other"</label>
</div>
<div class="col-75">
<input type="text" name="otherInput" Id="otherInput" required>
</div>
<span class="highlight"></span>
<span class="bar"></span>
</div>
</div> Ответ №2:
Вам просто нужно добавить document.getElementById("other").innerHTML = ''; в свой else , чтобы скрыть div.
<div class="select-list">
<select name="relations" id="selectBox" style="text-transform: none;" class="select" required onchange="otherFunc()">
<option value="">Choose</option>
<option value="Son">Son</option>
<option value="Daughter">Daughter</option>
<option value="Other Relative">Other Relative</option>
<option value="Other">Other</option>
</select>
<span class="highlight"></span>
<span class="bar"></span>
</div>
</div>
<script>
function otherFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
console.log(selectedValue)
if (selectedValue == "Other") {
document.getElementById("other").innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
} else {
document.getElementById("other").innerHTML = '';
}
}
</script>
<div id="other"></div> Ответ №3:
ну, используйте какой-нибудь класс css (чтобы установить visibility , opacity / other prop для элемента :
<script>
let otherDiv = undefined;
function otherFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
console.log(selectedValue)
if (selectedValue == "Other") {
otherDiv = document.getElementById("other");
otherDiv.style.opacity = 1;
otherDiv.innerHTML = ' <div class="group"><div class="col-25"><label>Please clarify if "Other"</label></div><div class="col-75"><input type="text" name="otherInput" required></div><span class="highlight"></span><span class="bar"></span></div>'
} else {
if(!!otherDiv)
otherDiv.style.opacity = 0;
}
}
</script>