0

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

通过反复试验，我已经完成了某种工作，但它要么在更改下拉列表时删除我的值，要么在我没有它时添加太多框，然后在创建新框之前删除以前创建的框。

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

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}"/>';             
        }
    }
}
4

2 回答 2

0

使用element.removeChildandelement.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));
   }
});

演示

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

于 2012-07-19T20:39:01.710 回答
0

好吧，你在这里练习了一些不好的做法。您正在以循环中的文档的形式访问 innerHTML 属性。此外，您的“else if”和“else”完全相同。

我会重写如下：

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;
}
}
于 2012-07-19T20:41:10.757 回答