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/

原来的答案是属于杰夫