2010-04-16 18 views
9

Çevreye bakmayı denedim ve benzer sorunlar var, ancak benimki çok daha basit ama yine de bunların içinde bir çözüm bulamıyorum forumları.jQuery: Seçme kutusundaki bir öğeyi seçin, diğer seçenek seçildiğinde gizleyin,

jQuery'yi öğrenirken, bir açılır menüden bir öğe/seçenek seçildiğinde bir DIV göstermeye çalışıyorum ve seçili açılır menüdeki herhangi bir seçenek seçildiğinde aynı DIV'yi gizler.

seçme 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 ı seçildiğinde 'Diğer' göstermek gerekir: select menüde başka seçenek seçildiğinde

<div id="specify-source">Other source here...</div> 

, yukarıdaki div olmamalı görünür Ol.

Bu jQuery denedim ama tabii ki düzgün çalışmazsa: Bana verebileceğiniz

$(function() { 
$.viewMap = { 
    'sother' : $('#specify-source') 
    };  
    $('#source').change(function() { 
    // hide all 
    $.each($.viewMap, function() { this.hide(); }); 
    // show current 
    $.viewMap[$(this).val()].show(); 
    }); 
}); 

Herhangi bir yardım, ben çok iyi olurdu.

sayesinde

cevap

20

ile seçilmiş bir işlem yapılmayacaktır.) (

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

, ama bu bir çözüm hemen çalıştı:

İşte Amit yardımıyla benim son kod sayesinde. Çok teşekkürler Amit, çok takdir et. Yardımları için diğer insanlara teşekkürler. –

+0

Bitti, şimdi oy verebiliyorum :) –

+0

Heh, geri dönüş için teşekkürler. – Amit

0

Bu bir öğe gizlemek için en basit yoludur:

<!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> 
0

simplier:

burada

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

Ve gösteri ve gizlemek jquery örneğidir

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

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

Görüşünüzü göz ardı etme ap, işte başlıyorsunuz:

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

Tüm kodunuzu nasıl eklememi istersiniz?

Diğer yayınlanan yöntemler de çalışacaktır ancak çalışmaz ama @ çoklu = "çoklu" Seni görünümü harita ile yapmaya çalıştığımız görmek

0

Ben DIV ben 'Diğer' seçeneği, seçili sayfayı girdikten sonra gizli olmasını ihtiyaç duyulduğunda göstermesi gerektiğini söylemeyi unutmuşum, o yüzden .hide ekledi;: ile basitleştirme özelliği.

Ayrıca bir slideDown ('fast') ekledim; kullanılabilirlik konusunda yardımcı olmak. Ben oy veremezsiniz stackoverflow.com yeniyim bu yana

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