jquery在选择菜单后添加显示输入字段的新div

对于每个用户，都有几个参考。每个引用可能具有不同的属性。因此，我希望用户首先选择reference属性，然后该属性的输入字段变为可见。如果用户有多个引用，他可能可以通过单击add按钮添加一个新的引用，并显示一个新的选择，依此类推

我试着用javascript来做，但是有一些小问题。我找到了一个处理选择的非常简单的jQuery解决方案：

HTML

CSS

然后添加新的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();

var-inival=1；
函数addNew（）{
var newArea=add_New_Element（）；
var htcontents=“”+
“-选择—+
“选项1”+
“方案2”+
""+
“文本框标签1”+
“文本框标签2”+
“文本框标签2”+
“文本框标签2”；
document.getElementById（newArea）.innerHTML=htcontents；
}
函数add_New_元素（）{
inival=inival+1；
var ni=document.getElementById（'area'）；
var newdiv=document.createElement（'div'）；
var divIdName='Div#'+inival；
newdiv.setAttribute（'id'，divIdName）；
ni.儿童基金会（新分部）；
返回divIdName；
}
函数addNew（）；

---

但你可能会看到，这是一个很长的解决方案。我想有更有效、更短的解决方案。非常感谢您的帮助。

虽然这不是我的解决方案，但它可能会帮助其他人

---

原始答案属于Jeff

当您声称使用jQuery时，为什么要手动创建和附加元素？在多行上，您使用双引号作为html的一部分，其中字符串用双引号括起来<代码>“嗨，Sorpigal，这是因为我不懂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);
    });
});

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

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();