2010-03-24 23 views
5

Seçilmiş bir metin kutusu:jQuery göster Bir Seçenek Aşağıdaki kodu var

<select> 
<option value="Type 1">Type 1</option> 
<option value="Type 2">Type 2</option> 
<option value="Type 3">Type 3</option> 
<option value="Other">Other</option> 
</select> 

<input type="text" id="other" /> 

Ne jQuery metin kutusu aşağıda varsayılan olarak gizlenir kullanıyor yapmak ve sonra bunu göstermek istediğiniz bir kullanıcı seçerse açılır menüden diğer seçenek.

cevap

6
<select id="sel"> 
<option value="Type 1">Type 1</option> 
<option value="Type 2">Type 2</option> 
<option value="Type 3">Type 3</option> 
<option value="Other">Other</option> 
</select> 

<input type="text" id="other" style="display: none;" /> 

$('#sel').change(function() { 
    $('#other').css('display', ($(this).val() == 'Other') ? 'block' : 'none'); 
}); 
+0

Cameron başka seçenek seçilmişse metin kutusu gizlemek için sormadım rağmen ... – ScottE

+0

@ScottE: bu doğrudur, ancak amaçlanan nedir OP Bunlar yeterli değilse çok şaşırırım. –

+0

Bu bir harika teşekkürler. – Cameron

1

bu deneyin:

<select id="selectbox_id"> 
<option value="Type 1">Type 1</option> 
<option value="Type 2">Type 2</option> 
<option value="Type 3">Type 3</option> 
<option value="Other">Other</option> 
</select> 

<input type="text" id="other" /> 

JQuery:

$(function(){ 
    // hide by default 
    $('other').css('display', 'none'); 

    $('selectbox_id').change(function(){ 
    if ($(this).val() === 'Other') { 
    $('other').css('display', 'block'); 
    } 
}); 
}); 
+0

neden aşağı oy ...............? – Sarfraz

+0

Bunun neden reddedildiğinden emin değil. "If" ifadesinde ekstra bir "=" işareti dışında iyi çalışır. – jj2

9

burada herhangi bir css gerek yok.

$('#sel').change(function() { 
    var selected = $(this).val(); 
    if(selected == 'Other'){ 
     $('#other').show(); 
    } 
    else{ 
     $('#other').hide(); 
    } 
}); 
+0

hiç kimsenin daha önce "css'ye gerek yok" dediğini duymamıştı. neden dünyada hiç css kullanmaktan kaçınmak istersiniz? –

+0

@David Hedlund, jQuery'nin yerleşik işlevselliğe sahip olduğu zaman öğeleri göstermek ve gizlemek için css kullanmanın ne anlamı vardır. Sanırım hala abaküsle hesaplamalar yapmak istiyorsanız, ancak show/hide özelliğini kullanmak çok daha zariftir. – Gabe

+0

Aslında, David Hedlund'un cevabını daha zarif buldum. Firebug'da oluşturulan içeriğe bakarsanız, css ekranının yine de kapakların altında kullanıldığını görürsünüz. – ScottE

İlgili konular