JQuery: показать элемент из выпадающего списка, скрыть его, когда выбран другой вариант - PullRequest
Новая
       11

JQuery: показать элемент из выпадающего списка, скрыть его, когда выбран другой вариант

9 голосов
/ 17 апреля 2010

Я пытался осмотреться, и есть похожие проблемы, но моя намного проще, но пока я не могу найти решение на этих форумах.

Во время изучения jQuery я пытаюсь показать DIV, когда выбран элемент / параметр из выпадающего списка выбора, и скрыть тот же DIV, когда выбран любой другой параметр в выпадающем списке.

выберите HTML: 

<select name="source" id="source">
  <option value="null" selected="selected">&mdash;Select&mdash;</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 ]

20 голосов
/ 17 апреля 2010

Я вижу, что вы пытаетесь сделать с картой просмотра. Упростите это с помощью: 

$('#source').change(function() {
    ($(this).val() == "sother") ? $('#specify-source').show() : $('#specify-source').hide();
});
0 голосов
/ 20 апреля 2010

Я забыл упомянуть, что DIV, который мне нужно отображать при выборе опции «Другое», нужно было скрывать при входе на страницу, поэтому я добавил .hide (); имущество.

Я также добавил slideDown («быстро»); чтобы помочь с удобством использования.

Вот мой окончательный код благодаря помощи Амита: 

$('#specify-source').hide();
$('#source').change(function() {
($(this).val() == "sother") ? 
$('#specify-source').slideDown('fast') : $('#specify-source').hide();
});
0 голосов
/ 17 апреля 2010

проще: 

$(function() {  
$("#specify-source").hide();

$("#source").change(function(){
    if ($(this).val() == "sother")
        $("#specify-source").show();
    else
        $("#specify-source").hide();
    });
});
0 голосов
/ 17 апреля 2010

Игнорируя вашу карту просмотра, вы идете: 

$("#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();

Вы хотите, чтобы я включил в него весь ваш код?

Другие опубликованные методы также будут работать, но не будут работать, но не будут обрабатывать выборку с помощью @ multip = "multiple"

0 голосов
/ 17 апреля 2010

Это самый простой способ скрыть элемент: 

$('.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...