jQuery: покажите элемент от выпадающего выбора, скройте его, когда другая опция выбрала
Я попытался озираться и существуют подобные проблемы, но мой - более простой путь, но, я не могу найти решение в рамках этих форумов.
При изучении jQuery я пытаюсь показать DIV, когда объект/опция от выпадающего выбора выбран, и скройте тот же самый DIV, когда любая другая опция в выпадающем выборе выбрана.
избранный HTML:
<select name="source" id="source">
<option value="null" selected="selected">—Select—</option>
<option value="s1">Source 1</option>
<option value="s2">Source 2</option>
<option value="sother">Other</option>
</select>
DIV, который я должен показать, когда 'Другой' выбран:
<div id="specify-source">Other source here...</div>
Когда любая другая опция в избранном меню выбрана, вышеупомянутый DIV не должен быть видим.
Я попробовал этот jQuery, но конечно он не работает правильно:
$(function() {
$.viewMap = {
'sother' : $('#specify-source')
};
$('#source').change(function() {
// hide all
$.each($.viewMap, function() { this.hide(); });
// show current
$.viewMap[$(this).val()].show();
});
});
Любая справка, которую можно дать мне, я был бы очень признателен за его.
Спасибо,
5 ответов
Я понимаю, что вы пытаетесь сделать делать с картой просмотра. Упростите это:
$('#source').change(function() {
($(this).val() == "sother") ? $('#specify-source').show() : $('#specify-source').hide();
});
проще:
$(function() {
$("#specify-source").hide();
$("#source").change(function(){
if ($(this).val() == "sother")
$("#specify-source").show();
else
$("#specify-source").hide();
});
});
Не обращая внимания на вашу карту вида, пожалуйста:
$("#source").change(function () {
var foo = false;
$("#source option:selected").each(function () { if ($(this).val() == "sother") foo = true; });
if (foo) $('#specify-source').show(); else $('#specify-source').hide();
}).change();
Вы хотите, чтобы я включил инструкции во весь ваш код?
Другие опубликованные методы будут тоже работает, но не будет работать, но не будет обрабатывать выбор с помощью @ multiple = "multiple"
Я забыл упомянуть, что DIV мне нужно отображать, когда была выбрана опция «Другое», которую нужно было скрыть при входе на страницу, поэтому я добавил .hide (); имущество.
Я также добавил slideDown («быстро»); чтобы помочь с удобством использования.
Вот мой последний код благодаря помощи Амита:
$('#specify-source').hide();
$('#source').change(function() {
($(this).val() == "sother") ?
$('#specify-source').slideDown('fast') : $('#specify-source').hide();
});
Это самый простой способ скрыть элемент:
$('.target').hide();
А вот пример jquery для отображения и скрытия:
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
<script>
$("#showr").click(function () {
$("div:eq(0)").show("fast", function () {
/* use callee so don't have to name the function */
$(this).next("div").show("fast", arguments.callee);
});
});
$("#hidr").click(function () {
$("div").hide(2000);
});
</script>
</body>
</html>