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

さて、あなたはここでいくつかの悪い習慣を実践しています。ループ内のドキュメントとして両方の 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 に答える
0

をいじる代わりにelement.removeChildandを使用してください。これにより、DOM 内の特定のノードを削除できます。element.appendChildinnerHTML

<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 に答える