Question

我无法弄清楚为什么这不起作用。我究竟做错了什么？！我试图将一个由表单元素组成的行添加到div。

我经历了很多次，没有经历过。我做错了什么？

代码：

<div class="row">
    <div class="col-md-4">
        <select class="form-control" id="attributeSelect" style="width: 100%">
            <option value='1'>Colors</option>
            <option value='2'>Product Type</option>
            <option value='3'>Brands</option>
            <option value='4'>Product Type</option>
            <option value='5'>Width</option>
            <option value='6'>Materials</option>
            <option value='7'>Pattern</option>  
        </select>
    </div>
    <div class="col-md-2 text-left">
        <button class="btn btn-md btn-success" onclick="addAttribute();">ADD</button>
    </div>
 </div>
 <div id="add-attribute">

 </div>

使用Javascript：

<script type="text/javascript">
    function addAttribute() {
        var iDiv = document.createElement('div');
        iDiv.className = 'row';
        document.getElementById('add-attribute').appendChild(iDiv);

        // Now create and append to iDiv
        var innerDiv1 = document.createElement('div');
        innerDiv1.className = 'col-lg-4';
        iDiv.appendChild(innerDiv1);
        innerDiv1.innerHTML = "Value";

        // Now create and append textbox
        var innerDiv2 = document.createElement('div');
        innerDiv2.className = 'col-lg-8';
        iDiv.appendChild(innerDiv2);
        var attributeSelect = document.getElementById("attributeSelect");
        var attributeValue = e.options[e.selectedIndex].value;
        innerDiv2.innerHTML = "<input type='text' name='attr_" + attributeValue + ' >";


    }

</script>

Answer 1

您的innerDiv2.innerHTML未正确设置。 e.options[e.selectedIndex].value也没有意义。您只需从attributeSelect本身获取值即可。

function addAttribute() {
     var iDiv = document.createElement('div');
     iDiv.className = 'row';
     document.getElementById('add-attribute').appendChild(iDiv);

     // Now create and append to iDiv
     var innerDiv1 = document.createElement('div');
     innerDiv1.className = 'col-lg-4';
     iDiv.appendChild(innerDiv1);
     innerDiv1.innerHTML = "Value";

     // Now create and append textbox
     var innerDiv2 = document.createElement('div');
     innerDiv2.className = 'col-lg-8';
     iDiv.appendChild(innerDiv2);
     var attributeSelect = document.getElementById("attributeSelect");


     var attributeValue = attributeSelect.value;

     innerDiv2.innerHTML = "<input type='text' name='attr_" + attributeValue + "' >";


 }

Javascript添加到div不工作

1 个答案: