Показать опцию выбора div

Question

У меня есть меню выбора (выпадающий список).

<select> 
    <option id="one" value="something">Car</option> 
    <option id="two" value="anything">Plane</option> 
</select> 

& следующий DIV, который находится в где-то в моей странице.

<div id="somediv">This is a string.</div> 

Я хочу, чтобы отобразить выше DIV при выборе второго пункта меню (id="two").

У меня есть 2 вопроса: (1) Каков наилучший способ сохранить этот div скрытым по умолчанию? Я просто добавлю display:none; к его дизайну, но, возможно, есть лучшее решение? (2) Как я могу сделать div-шоу, если выбрана опция id="two"? Любой ответ был бы весьма признателен.

Answer 1

Дисплей не работает.

Вы пытались подключиться к событию onchange? http://www.w3schools.com/jsref/event_onchange.asp?

Answer 2

Итак, у меня будет класс для div, допустим, is-hidden, и мой CSS будет иметь .is-hidden { display: none; }. Затем сделайте следующее.

HTML:

<div id="somediv" class="is-hidden">This is a string.</div> 

JS:

$div = $("#somediv"); 
$("select").on("change", function() { 
    $div.is(".is-hidden") || $div.addClass("is-hidden"); 

    //Option 1 
    if ($(this).find(":selected")[0].id === "two") { 
     $div.removeClass("is-hidden"); 
    } 

    //Option 2 (same as above, but a bit shorter) 
    $(this).find(":selected")[0].id === "two" && $div.removeClass("is-hidden"); 
}); 

Answer 3

Так что я написал простой JQuery скрипт, который делает то, что вы описали. Дайте мне знать, исправляет ли вы вашу проблему. Вы также можете сделать это с помощью javascript, но я думаю, что jquery работает для этого просто отлично. http://codepen.io/Francisco104/pen/vEPRgp

$('select').change(function(){ 
    decide($(this)); 
}); 
var decide = function (elem) { 
    var touch = elem; 
    if (touch.val() === 'anything') { 
    return $('#somediv').css('display', 'block'); 
    } 
}; 

Answer 4

для сокрытия его по умолчанию, используя style="display: none" является самым простым. Вы можете сделать это с помощью jQuery $('div#somediv').hide();, но я не вижу никакой пользы от этого, кроме как вы, возможно, хотите, чтобы логика show/hide была вместе.

Вот два простых решения, в которых используется событие change().

Если div#somediv должен быть показан на постоянной основе, когда был выбран option#two:

$("select").change(function() { 
 
    if ($(this).val() == 'anything') $('div#somediv').show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option id="one" value="something">Car</option> 
 
    <option id="two" value="anything">Plane</option> 
 
</select> 
 
<div id="somediv" style="display: none">This is a string.</div>

Если div#somediv должны быть показаны в то время как option#two выбран и исчезают, если пользователь выбирает другой вариант:

$("select").change(function() { 
 
    $('div#somediv').toggle($(this).val() == 'anything'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option id="one" value="something">Car</option> 
 
    <option id="two" value="anything">Plane</option> 
 
</select> 
 
<div id="somediv" style="display: none">This is a string.</div>

Вы, вероятно, следует дать id к select, а также, чтобы сделать селектор JQuery менее ломкими.

Answer 5

1) Вы можете скрыть DIV изначально дает свойство Cssdisplay:none; или установив его свойстводисплея с помощью JavaScript, который будет работать в начальной загрузки.

2) Вы можете слушать OnChange событие в selectfield и проверить, если значение «что-нибудь», то показать DIV по изменения его стиль отображения свойства в block и hidden в других случаях.

document.getElementById("somediv").style.display='none'; 
 
var showHideDiv=function(selectField){ 
 
    var divElement=document.getElementById("somediv"); 
 
if (selectField.value=='anything') 
 
    divElement.style.display='block'; 
 
    else 
 
    divElement.style.display='none'; 
 
}

<select onchange='showHideDiv(this)'> 
 
    <option id="one" value="something">Car</option> 
 
    <option id="two" value="anything">Plane</option> 
 
</select> 
 

 
<div id="somediv">This is a string.</div>

Answer 6

Вот что вы можете сделать:

в вашем HTML файле:

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 
<select> 
    <option id="one" value="something">Car</option> 
    <option id="two" value="anything">Plane</option> 
</select> 

Вам нужно импортировать библиотеку JQuery (который я покажу вам там прямо над элемент <select>), чтобы вы могли выполнить свой скрипт.

В файле CSS:

#somediv { 
    display: none; 
} 

и, наконец, вот скрипт, который будет показывать погружение, когда «самолет» выбран

$('select').change(function(){ 
    $('#somediv').css('display','block'); 
}); 

Взгляните на эту JSFIDDLE я сделал для вас ,

Answer 7

Самый простой способ, чтобы скрыть внутри HTML

<div hidden>content</div>

Чтобы отобразить скрытый DIV

$ (документ) .ready (функция() {

$ ("select"). Change (function() { $ ("выбрать вариант: выбран"). Каждая (функция() {

  if($(this).attr("value")=="anything"){ 


       $("#somediv").show(); 

      } 

}) ;. });