Вопросы Теги

Возможно появляться и скрывать div?

Я добился, чтобы 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>
1
задан 08.11.2019, 14:39
4 ответа

Точный пример того, что ты хочешь 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.

1
ответ дан 01.12.2019, 12:18
  • 1
    Здравствуйте! serí в превосходный, что ты мог объяснять то, что делает твой có я говорю :) – Riaven 08.11.2019, 01:38
  • 2
    Хорошие! Это está факт ;) Я жду, чем с explicació n añ adida будьте достаточным! Приветствие ^^ – Alejandro López Cardo 08.11.2019, 11:21
  • 3
    Спасибо, он подал мне твою идею. – Alek 15.11.2019, 23:07 

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>
-1
ответ дан 10.11.2019, 22:27

Так как уже они дали тебе ответ, со свойством 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>
1
ответ дан 01.12.2019, 12:18

Чтобы скрывать 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 что-то новое.

0
ответ дан 01.12.2019, 12:18
  • 1
    Спасибо, но ¿ Не возможно со списками desplegables? – Alek 08.11.2019, 00:32
  • 2
    Кларо só должно читать это событие onChange select onchange="funcion(evento)" – Emiliano Pamont 08.11.2019, 10:35