Question

我想创建一个动态数量的字段，由dropDownList中选择的值确定。由于这将在客户端执行，因此必须通过Javascript完成。我知道我可以通过手工创建所有字段然后简单地使用css来显示/隐藏每个字段来实现这种效果，但这是很多重复的代码。

通过反复试验，我已经完成了它的工作，但它在更改我的下拉列表时删除了我的值，或者如果我没有它则添加太多的框，在创建新的框之前删除先前创建的框。 / p>

有没有一种简单的方法来完成我正在尝试做的事情，而不会在更改下拉列表时丢失输入的值？我尝试制作的东西如下。

function doAThing() {
    var attemptsValue = parseInt(document.forms['ProgramApplicationForm'].elements['VerificationPrimaryHomePhoneAttemptsDropDownList'].value);

    if (attemptsValue == null) {
        document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML = null;
    } else if (document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML == null) {
        for (counter = 1; counter < attemptsValue + 1; counter++) {
            document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML += 
            '<label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '">Attempt ' + counter + ' Date:</label><input type="text" name="VerificationPrimaryHomePhoneAttemptDate' +  counter + '" value="" id="p-dod-date-picker" maxlength="10" class="size-ten" placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"/>'; 
        }            
    } else {
        document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML = null;

        for (counter = 1; counter < attemptsValue + 1; counter++) {
            document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML += 
            '<label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '">Attempt ' + counter + ' Date:</label><input type="text" name="VerificationPrimaryHomePhoneAttemptDate' +  counter + '" value="" id="p-dod-date-picker" maxlength="10" class="size-ten" placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"/>';             
        }
    }
}

Answer 1

使用element.removeChild和element.appendChild代替干扰innerHTML。这将使您能够删除DOM中的特定节点：

<form name="ProgramApplicationForm">
<select id="VerificationPrimaryHomePhoneAttemptsDropDownList" name="VerificationPrimaryHomePhoneAttemptsDropDownList">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
    <div id="VerificationPrimaryHomePhoneAttemptDate"></div>
</form>

function createLabelElement(i){
    /* Create the label */
    var label = document.createElement("label");
    label.appendChild(document.createTextNode("Attempt "+i+" Date:")); // add text

    /* create the input and set all attributes */
    var input = document.createElement("input");
    input.type = "text";
    input.value = "";
    input.id="p-dod-date-picker"; // ids should be unique!
    input.maxlength = 10;
    input.className = "size-ten";
    input.placeholder = "yyyy-mm-dd";
    input.title = "yyyy-mm-dd";
    input.pattern = "\d{4}-\d{2}-\d{2}";

     /* a label doesn't need "for", 
       you can actually put your input into the label element 
    */
    label.appendChild(input);

    return label; // return the created element
}

document.getElementById('VerificationPrimaryHomePhoneAttemptsDropDownList').addEventListener('change',function(){
   var numberOfElements = parseInt(this.value);
   var targetDiv = document.getElementById('VerificationPrimaryHomePhoneAttemptDate');   

   // As long we have to many elements remove them
   while(targetDiv.children.length > numberOfElements ){
        targetDiv.removeChild(targetDiv.lastChild);
   }
   // As long we have not enough elements add more
   while(targetDiv.children.length < numberOfElements){
        targetDiv.appendChild(createLabelElement(targetDiv.children.length + 1));
   }
});

Demo

如果您需要，您仍然可以在创建的标签上使用innerHTML，这将使第一个功能更小。另请注意，null不是数字，而是一个对象。

Answer 2

好吧，你在这里练习一些不好的做法。您正在访问innerHTML属性作为循环中的文档。此外，如果＆＃39;还有其他问题。和其他＆＃39;完全一样。

我会改写如下：

function doAThing() {
var d = document;
var attemptsValue = parseInt(d.forms['ProgramApplicationForm'].elements['VerificationPrimaryHomePhoneAttemptsDropDownList'].value);

var attemptDate = d.getElementById('VerificationPrimaryHomePhoneAttemptDate');
if (attemptsValue == null) {
        attemptDate.innerHTML = null;
    } else {

        var html = "";
        for (counter = 1; counter < attemptsValue + 1; counter++) {
            html += 
            '<label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '">Attempt ' + counter + ' Date:</label><input type="text" name="VerificationPrimaryHomePhoneAttemptDate' +  counter + '" value="" id="p-dod-date-picker" maxlength="10" class="size-ten" placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"/>';
        }
        attemptDate.innerHTML = html;
}
}

Javascript动态条件

2 个答案: