在選擇變更時隱藏/顯示其他輸入元素？

典型的noob問題。 :-) 我看了一些在這裏提出的類似問題，這些解決方案對我來說太複雜了，無法讓他們工作。或者他們不真的工作？無論如何，這段代碼的作用是當選擇的選項是USA/notUSA時，它隱藏/顯示Province輸入。默認選擇是具有值美國的選項。爲了使其與其他選項不同，我爲其分配了class = us和class = notus。在選擇變更時隱藏/顯示其他輸入元素？

function showhideProvinceInput(){ 
    if($("#countries option[class='notus']")){ 
     $('#provincelabel').fadeIn("slow"); 
     $('#provinceinput').fadeIn("slow"); 
    } 
    if($("#countries option[class='us']")) { 
     $('#provincelabel').fadeOut(0); 
     $('#provinceinput').fadeOut(0); 
    } 
    } 

    $(document).ready(function(){ 
     $('#countries').change(function() { 
      showhideProvinceInput(); 
     }); 
    });

它部分地工作，至少在「顯示」的情況下。部分原因是輸入顯示然後隱藏在1秒左右。我沒有試圖隱藏它，因爲顯示它還沒有完全工作。 :-)任何幫助？

來源

2010-08-18 Joann

我認爲你缺少你選擇的一部分 - 你要檢查所選的選項具有類NOTUS的：

function showhideProvinceInput(){ 
    if($("#countries option:selected").hasClass("notUs")){ 
     $('#provincelabel').fadeIn("slow"); 
     $('#provinceinput').fadeIn("slow"); 
    } 
    else { 
     $('#provincelabel').fadeOut(0); 
     $('#provinceinput').fadeOut(0); 
    } 
    }

來源

2010-08-18 10:41:12 Paddy

該死的，對我來說太快了：d ...我已經在拍打jsfiddle.net這個，看看（@joann）http://jsfiddle.net/q9bwR/ – 2010-08-18 10:46:03

完美的作品！不知道hasClass的功能。謝謝！ – Joann 2010-08-18 10:46:04

@ILMV - JSFiddle - 漂亮的網站。感謝指針。 – Paddy 2010-08-18 10:56:16

你的功能，如果你正在使用類應該是這個樣子：

function showhideProvinceInput(){ 
if($("#countries option.notus:selected").length){ 
    $('#provincelabel, #provinceinput').fadeIn("slow"); 
} 
else { 
    $('#provincelabel, #provinceinput').hide(); 
} 
} 

$(function(){ 
    $('#countries').change(showhideProvinceInput); 
});

這裏的主要變化是你可以使用一個.class selector，並使用:selected僅查找所選<option>，然後用.length，看看是否能找到選擇任何項目。您也可以將後面的選擇器組合起來，並使用.hide()作爲即時.fadeOut(0)。

也沒有必要爲匿名函數，如果這個處理程序是所有你打電話:)

來源

2010-08-18 10:43:30

整潔。謝謝！我正在爲此而努力。 – Joann 2010-08-18 11:40:08

在選擇變更時隱藏/顯示其他輸入元素？

回答

相關問題