Question

我有一个HTML表单，用户应该能够为给定的问题添加其他文本框。但在任何文本输入之前，有一个选择的下拉菜单，文本框在每次选择后变得可见（也取决于选择，可见文本框计数更改）。这是javascript;

    var var1=1;
        function addAffiliation(){
                    var newArea = addNew();
                    var htcontents ="<input placeholder='categories..'  
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>" 
                        + "<br/><br/>"; 
                    document.getElementById(newArea).innerHTML = htcontents;             
                }
        function addNew() {
                    var1=var1+1;       
                    var var2 = document.getElementById('area');
                    var newdiv = document.createElement('div');
                    var divIDName = 'Div #'+ var1;
                    newdiv.setAttribute('id',divIDName);
                    ni.appendChild(newdiv);
                    return divIDName;
               }

但是当添加额外字段时，而不是;

<input placeholder="categories.."
    class="input_box" type="textbox" name="categories[]"
    onchange="display(this, 'field2', 'field3', 'field4');"/>

这是创建的（双引号位置错误）

<input placeholder="categories.."  
        class="input_box' type="textbox" name="categories[]" 
        onchange="display(this, "field2', 'field3', 'field4');'/>

由于这个问题，field2-3-4不可见..

该怎么办？

这是显示功能

function display(obj,id1,id2,id3) {
    txt = obj.options[obj.selectedIndex].value;
    document.getElementById(id1).style.display = 'none';
    document.getElementById(id2).style.display = 'none';
    document.getElementById(id3).style.display = 'none';
    if ( txt.match(id1) ) {
        document.getElementById(id1).style.display = 'block';
    }
    if ( txt.match(id2) ) {
        document.getElementById(id2).style.display = 'block';
    }
    if ( txt.match(id3) ) {
        document.getElementById(id3).style.display = 'block';
    }
}

@Aram，

我想要一个下拉菜单;

<option name="first">selection 1</option>
<option name="second">selection 2</option>

如果用户选择选择1;

field1:< input name="field1".....>
field2:< input name="field2".....>

如果用户选择选择1;

field3:< input name="field3".....>
field4:< input name="field4".....>
field5:< input name="field5".....>

当用户填写完框后，他可能想要添加更多内容;

addReference();

然后他又看到了，

<option name="first">selection 1</option>
    <option name="second">selection 2</option>

依此类推......现在已经清楚了吗？

Answer 1

更改

var htcontents ="<input placeholder='categories..'  
class='input_box' type='textbox' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>"

到

var htcontents ="<input placeholder=\"categories..\"  
class=\"input_box\" type=\"textbox\" name=\"categories[]\" 
onchange=\"display(this, 'field2', 'field3', 'field4');\"/>"

即转义字符串中的双引号。

Answer 2

我不确定你在那里做了什么，因为在字符串附近的addAffiliation中存在语法错误。您应该对整个字符串使用单引号，为属性值使用双引号，并使用+在需要时连接js变量。您必须转义任何与使用\定义字符串的引号相同的引号。

另外，我认为ni应该是var2。通常，永远不要将变量命名为variableX，因为它没有告诉我们什么（我们知道它是变量！）。另外，我会考虑使用jQuery简单地与元素进行交互。

请参阅http://jsfiddle.net/ntCGc/。

var var1=1;
function addAffiliation(){
    var newArea = addNew();
    var htcontents ='<input placeholder="categories.." class="input_box" type="textbox" name="categories" onchange="javascript:display(this, \'field2\', \'field3\', \'field4\');"/><br/><br/>'; 
    document.getElementById(newArea).innerHTML = htcontents;             
}
function addNew() {
    var1=var1+1;       
    var var2 = document.getElementById('area');
    var newdiv = document.createElement('div');
    var divIDName = 'Div #'+ var1;
    newdiv.setAttribute('id',divIDName);
    var2.appendChild(newdiv);
    return divIDName;
}

addAffiliation();

Answer 3

解决方案非常接近ManseUK的建议，

var htcontents ="<input placeholder='categories..'  
class='input_box' name='categories[]' 
onchange='display(this, 'field2', 'field3', 'field4');'/>"

应该是

var htcontents ="<input placeholder=\'categories..\'  //notice slashes
class=\'input_box\' name=\'categories[]\' //notice slashes
onchange=\'display(this, \'field2\', \'field3\', \'field4\');\'/>" //notice slashes

希望能帮到任何人......

javascript htcontents没有正确显示在HTML中

3 个答案: