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/

原始答案属于杰夫

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

1 个答案: