當選擇一個選項時，jQuery顯示文本框

我希望能夠在選擇某個值時顯示適當的文本框。我將不勝感激任何幫助。當選擇一個選項時，jQuery顯示文本框

JQUERY 
$('#enterdatabox').change(function() { 
var selected = $(this).val(); 
    $('#' + selected).css('display', selected ? 'block' : 'none'); 
}); 



HTML 
<select name="enterdatabox" id="enterdatabox"> 
     <option value="">Please Choose...</option> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option> 
     <option value="option3">Option 3</option> 
     <option value="option4">Option 4</option> 
     <option value="option5">Option 5</option> 
     <option value="option6">Option 6</option> 
     <option value="option7">Option 7</option> 
     <option value="option8">Option 8</option> 
</select> 

<input type="text" id="option1" style="display: none;" /> 
<input type="text" id="option2" style="display: none;" /> 
<input type="text" id="option3" style="display: none;" /> 
<input type="text" id="option4" style="display: none;" /> 
<input type="text" id="option5" style="display: none;" /> 
<input type="text" id="option6" style="display: none;" /> 
<input type="text" id="option7" style="display: none;" /> 
<input type="text" id="option8" style="display: none;" />

來源

2013-04-07 user2004710

您有什麼問題簡單得多的方式嗎？你的代碼似乎很好：http://jsfiddle.net/j08691/wKLVT/ – j08691 2013-04-07 16:30:31

@ j08691我認爲這是問題：http://jsfiddle.net/wKLVT/1/ – 2013-04-07 16:40:03

@ExplosionPills，剛剛刪除的答案是正確。我嘗試了所有三種解決方案，他們解決了這個問題，即一旦選擇適當的選項，文本框就不會顯示。所以謝謝。是否只是簡單的方法來確保文本框不會彼此堆疊在一行中選擇多個選項而無需隱藏每個文本框？ – user2004710 2013-04-07 16:58:35

-1

你的代碼是好的，但問題是#enterdatabox元素存在之前可能是你要綁定.change。有三個簡單的解決方案：

移動的JavaScript代碼的HTML後
裹在JavaScript代碼$(document).ready(function() {}
使用事件代表團，例如$(document).on('change, '#enterdatabox', function() {

第一個可能是最簡單的。

通過你也許可以讓這段代碼通過刪除所有ID和一個div包裹<input>和比較使用.index()

來源

2013-04-07 16:34:41

謝謝你的回答和評論 – user2004710 2013-04-07 17:17:49

當選擇一個選項時，jQuery顯示文本框

回答

相關問題