jquery添加新的divs，在選擇菜單後顯示輸入字段

Question

對於每個用戶，有幾個引用。每個參考可能具有不同的屬性。所以我希望用戶先選擇引用屬性，然後爲該屬性輸入字段變得可見。如果用戶有多個引用，他可以通過簡單地點擊添加按鈕添加一個新的引用，並出現一個新的選擇，依此類推。

我試圖用javascript來做，但有一些小問題。我發現處理選擇一個相當簡單的jQuery解決方案：

HTML

<form> 
    <select id="sel"> 
     <option value="">- select -</option> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option>   
    </select> 
    <input type="text" class="option1" /><span>Textbox label 1</span> 
    <input type="text" class="option2" /><span>Textbox label 2</span> 
    <input type="text" class="option2" /><span>Textbox label 2</span> 
    <input type="text" class="option2" /><span>Textbox label 2</span> 
</form> 

jQuery的

$(function() { 
    $('#sel').change(function() { 
     $("input").hide().filter("." + $(this).find("option:selected").val()).show(); 
    }); 
    $("input").focus(function() { 
     $(this).next("span").fadeIn(1000); 
    }).blur(function() { 
     $(this).next("span").fadeOut(1000); 
    }); 
}); 

CSS

input { 
    display:none; 
} 
span { 
    display:none; 
} 

，然後添加新的div ..

var inival=1; 
function addNew(){ 
    var newArea = add_New_Element(); 
    var htcontents = "<select id="sel">"+ 
     "<option value="">- select -</option>"+ 
     "<option value="option1">Option 1</option>"+ 
     "<option value="option2">Option 2</option>" +   
    "</select>"+ 
    "<input type="text" class="option1" /><span>Textbox label 1</span>"+ 
    "<input type="text" class="option2" /><span>Textbox label 2</span>"+ 
    "<input type="text" class="option2" /><span>Textbox label 2</span>"+ 
    "<input type="text" class="option2" /><span>Textbox label 2</span>"; 
    document.getElementById(newArea).innerHTML = htcontents;    
} 

function add_New_Element() { 
    inival=inival+1; 
    var ni = document.getElementById('area'); 
    var newdiv = document.createElement('div'); 
    var divIdName = 'Div #'+ inival; 
    newdiv.setAttribute('id',divIdName); 
    ni.appendChild(newdiv); 
    return divIdName; 
} 

function addNew(); 

但是你可能會看到，這是一個非常長的解決方案。我想有更高效和更短的解決方案。任何幫助深表感謝。

Answer 1

雖然這不是我的解決方案，它可以幫助其他人

http://jsfiddle.net/MXXXT/16/

原來的答案是屬於傑夫