Я добился, чтобы div был видимым, когда я выбираю выбор, но: есть возможность удалять div, когда Вы возьмете другой выбор, или который sobrescriba?, пример:
Выбрав выбор Вы показываете мне список drop2.1, но выбрав другой выбор, Вы показываете мне список drop2.2 и скройтесь drop2.1 или если я выбираю пустой выбор, скрылись другие списки.
Я не знаю, если было возможно, - очень новый в Веб развитии, но если они могли ориентировать меня, Вы помогли бы мне изучать новые методы.
function ToggleDiv(id) {
document.getElementById(id).style.display = "block"
}
function dropdown2(dos, ) {
if (drop1 = b) {
document.getElementById(dos).style.display = "block";
} else if (drop1 = ah)
{
document.getElementById(dos).style.display = "block";
}
div
}
div {
display: none;
}
<select name='drop1' style="width:150px;" onchange="ToggleDiv(this.value)">
<option value="none"></option>
<option value="b">una opcion</option>
<option value="ah">otra opcion</option>
</select>
<div id="b">
<select name='drop2.1' style="width:150px;" onchange="dropdown2(this.value)">
<option value=""></option>
<option value="in">ejemplo</option>
</select>
<div id="ah">
<select name='drop2.2' style="width:150px;" onchange="dropdown2(this.value)">
<option value=""></option>
<option value="y">example</option>
</select>
</div>
<div id="in">
<select name='drop3' style="width:150px;">
<option value=""></option>
<option value="in">posiblidades</option>
</select>
</div>
Точный пример того, что ты хочешь serГ - в следующей формы:
<style type="text/css">
div#b, div#ah{
display: none;
}
</style>
<select name='drop1' style="width:150px;" onchange="ToggleDiv(this.value)">
<option value="none"></option>
<option value="b">una opcion</option>
<option value="ah">otra opcion</option>
</select>
<div id="b">
<select name='drop2.1' style="width:150px;">
<option value=""></option>
<option value="in">ejemplo</option>
</select>
</div>
<div id="ah">
<select name='drop2.2' style="width:150px;">
<option value=""></option>
<option value="y">example</option>
</select>
</div>
<div id="in">
<select name='drop3' style="width:150px;">
<option value=""></option>
<option value="in">posiblidades</option>
</select>
</div>
<script type="text/javascript">
function ToggleDiv(id) {
if (id == 'b') {
document.getElementById('b').style.display = "block"
document.getElementById('ah').style.display = "none"
}else if(id == 'ah') {
document.getElementById('b').style.display = "none"
document.getElementById('ah').style.display = "block"
}else{
document.getElementById('b').style.display = "none"
document.getElementById('ah').style.display = "none"
document.getElementById('in').style.display = "none"
}
}
</script>
В es style
мы оставляем я скрываю начала select drop2.1
и drop2.2
и видимых drop3
. Такие
Как видимость div
Гєnicamente зависит от первого select drop1
, ты не нуждаешься в том, чтобы захватить ningГєn событие onchange
в оставшейся части selects.
С ToggleDiv
мы посылаем отборную стоимость. Внутри мы показываем, что div
's показывать и скрывать с условиями if
segГєn, если стоимость - b
или ah
, В случае когда не выбирает ningГєn стоимость, ocultarГЎn 3 select: drop2.1
, drop2.2
и drop3
.
function ToggleDiv(id){
document.getElementById('div1').style.display = "none";
document.getElementById('div2').style.display = "none";
document.getElementById('div3').style.display = "none";
document.getElementById('div4').style.display = "none";
if(id != 'ninguno' && id != '')
document.getElementById(id).style.display = "block";
}
div{
display: none;
}
<div id="div1" style="display: block;">
div1
<select name='drop1' style="width:150px;" onchange="ToggleDiv(this.value)">
<option value=""></option>
<option value="div2">div2</option>
<option value="div3">div3</option>
<option value="div4">div4</option>
<option value="ninguno">Ninguno</option>
</select>
</div>
<div id="div2">
div2
<select name='drop2.1' style="width:150px;" onchange="ToggleDiv(this.value)">
<option value=""></option>
<option value="div1">div1</option>
<option value="div3">div3</option>
<option value="div4">div4</option>
<option value="ninguno">Ninguno</option>
</select>
</div>
<div id="div3">
div3
<select name='drop2.2' style="width:150px;" onchange="ToggleDiv(this.value)">
<option value=""></option>
<option value="div1">div1</option>
<option value="div2">div2</option>
<option value="div4">div4</option>
<option value="ninguno">Ninguno</option>
</select>
</div>
<div id="div4">
div4
<select name='drop3' style="width:150px;" onchange="ToggleDiv(this.value)">
<option value=""></option>
<option value="div1">div1</option>
<option value="div2">div2</option>
<option value="div3">div3</option>
<option value="ninguno">Ninguno</option>
</select>
</div>
Так как уже они дали тебе ответ, со свойством none; я рекомендую тебе работать с Id's этой формы смоги быть любым элементом html
<div id="div" class="display:block;">
<p>Estoy mostrandome</p>
</div>
<button id="agregar" type="button" onclick="ocultarMostrar()">Mostrar</button>
<script>
function ocultarMostrar(){
if(document.getElementById('div').style.display === "block"){
document.getElementById('div').style.display = "none";
}else{
document.getElementById('div').style.display = "block";
}
}
</script>
Чтобы скрывать div с mГ©todo, в котором ты нуждаешься, ты можешь помещать none
в свойство display.
function showA () {
document.getElementById("a").style.display="block"
document.getElementById("b").style.display="none"
document.getElementById("c").style.display="none"
}
function showB () {
document.getElementById("a").style.display="none"
document.getElementById("b").style.display="block"
document.getElementById("c").style.display="none"
}
function showC () {
document.getElementById("a").style.display="none"
document.getElementById("b").style.display="none"
document.getElementById("c").style.display="block"
}
<button onclick="showA()">a</button>
<button onclick="showB()">b</button>
<button onclick="showC()">c</button>
<div style="display:none" id="a">a</div>
<div style="display:none" id="b">b</div>
<div style="display:none" id="c">c</div>
, Если ты пробуешь делать SPA или что-то похожее, я рекомендую тебе работать с algГєn framework (vue, react, угловой), ahorrarГЎs время и conocerГЎs что-то новое.
onchange="funcion(evento)"
– Emiliano Pamont
08.11.2019, 10:35