Question

我试过四处寻找并且有类似的问题，但我的方法更简单，但是，我在这些论坛中找不到解决方案。

在学习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();
   });
});

你可以给我任何帮助，我非常感激。

谢谢，

Answer 1

我看到你试图用视图做什么。用以下内容简化：

$('#source').change(function() {
    ($(this).val() == "sother") ? $('#specify-source').show() : $('#specify-source').hide();
});

Answer 2

这是隐藏元素的最简单方法：

$('.target').hide();

这是show and 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>

Answer 3

simplier：

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

$("#source").change(function(){
    if ($(this).val() == "sother")
        $("#specify-source").show();
    else
        $("#specify-source").hide();
    });
});

Answer 4

忽略您的视图，请转到：

$("#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”的选择

Answer 5

我忘了提到我选择'其他'选项时需要显示的DIV，需要在进入页面时隐藏，所以我添加了.hide（）;属性。

我还添加了一个slideDown（'fast'）;帮助实现可用性。

感谢Amit的帮助，这是我的最终代码：

$('#specify-source').hide();
$('#source').change(function() {
($(this).val() == "sother") ? 
$('#specify-source').slideDown('fast') : $('#specify-source').hide();
});

jQuery：从选择下拉列表中显示一个元素，在选择其他选项时隐藏它

5 个答案: