单击提交按钮时，不会清除下拉列表中的显示值和用户输入的输入字段值的问题-Jquery

Question

我正在使用html和jQuery。 当用户单击“提交”按钮并显示在html表中时，我正在迭代json值。 我在显示“ mortgageType”下拉列表中的值时遇到问题 ，而当用户单击“提交”按钮时，loanNum和Status字段按预期显示。 另一个问题是，当用户在第一行和第三行中输入数据并单击提交按钮时，我想清除用户输入的数据并显示我从后端获得的新值。

注意：只有“抵押类型”列是可编辑的字段，用户可以在其中从下拉列表中选择值，然后在该列的可用文本字段中输入一些文本。

范例：

var mortageType = [{"code":"Home","description":"Home"},{"code":"Car","description":"Car"}];
var loanNum = [{"code":"23432","description":"23432"},{"code":"33333","description":"33333"}];

在上面的json变量中，我要在前两行中显示两行数据。 如果用户在第一行和第三行中输入数据并单击提交按钮加载页面，则以上json值将显示在前两行中，但用户输入的第三行数据不会在按揭类型列，但下拉列表值已按预期清除。 下面是当用户单击“提交”按钮时我试图重置用户输入值的代码。

$('#loanTable input).val('');     
$('.mortgageType').val('');  

演示： https : //plnkr.co/edit/4bHYIEybwcofvw1uMzzI?p=preview

示例代码：

function submitData(){
        var flag = true;
        $('#loanTable input[type="text"]').val('');
        $('.mortgageType').val(''); 
        if (flag) {
          //values from backend
            var mortageType = [{"code":"Home","description":"Home"},{"code":"Car","description":"Car"}];
            var loanNum = [{"code":"23432","description":"23432"},{"code":"33333","description":"33333"}];
            var status = [{"code":"Approved","description":"Approved"},{"code":"Pending","description":"Pending"}];
               var j = 0;
              //iterate and show the jsonData in the table2 when user click on submit button
            for(var i=0; i<mortageType.length; i++){
                  j= j + 1;
               var mortageTypeValue = document.getElementById("mortageType"+j);
              console.log(" mortageType[i].code "+ mortageType[i].code);
              mortageTypeValue.innerHTML = mortageType[i].code;
                 var loanNumVal = document.getElementById("loanNum"+j);
                loanNumVal.innerHTML = loanNum[i].code;
                 var statusVal = document.getElementById("status"+j);
                statusVal.innerHTML = status[i].code;
           }
         } 
    } 

html代码：

<table class="loanTable" border="1">
    <tbody>
    <tr>
        <th>    <label for="show"><span name="3765" maxlength="1"class="message">Year</span></label> </th> <!-- From Dealer -->
        <th>    <label for="show"><span name="568" maxlength="1" class="message">Mortgage Type</span>&nbsp;
            <span name="496" maxlength="1" class="message"></span>
        </label>
        </th>
        <th>    <label for="show"><span name="3702" maxlength="1" class="message">Loan Num</span></label> </th>
        <th>    <label for="show"><span name="2366" maxlength="1" class="message">Status</span></label> </th>
        <th>    <label for="show"><span name="179"  maxlength="1" class="message">Comments</span></label> </th>
    </tr>
    <tr>
        <td>
            <label for="show" class="ddownlabels"></label> <!-- From Dealer -->
            <select id="year" name="year" disabled>
            </select>
        </td>
        <td>
            <div class="cloneX10 indField">
                <label for="show" class="ddownlabels"></label> <!-- From Dealer -->
                <select id="mortageType1" name="mortageType1" class="mortgageType">
                  <option value=""></option>
                    <option value="Auto">Auto</option>
                    <option value="Home">Home</option>
                    <option value="Car">Car</option>
                </select>
                <input name="ord1">
            </div>
        </td>
        <td><div class="cloneX10 indField" id="loanNum1"></div></td>
        <td><div class="cloneX10 indField" id="status1"></div></td>
        <td><div class="cloneX10 indField" id="comments1"></div></td>
    </tr>
...

Answer 1

在您的示例中，我看不到任何代码可以清除该值。

<input name="ord1">

您需要为此输入框指定一个ID，然后使用innerHTML清除该框

对于mortageTypeValue您需要使用SelectedIndex而不是innerHTML

更新

我不确定这是否是您想要的，但是请尝试以下操作：

    function submitData() {
        var flag = true;
        $('#loanTable input[type="text"]').val('');
        $('.mortgageType').val('');
        if (flag) {
            //values from backend
            var mortageType = [{ "code": "Home", "description": "Home" }, { "code": "Car", "description": "Car" }];
            var loanNum = [{ "code": "23432", "description": "23432" }, { "code": "33333", "description": "33333" }];
            var status = [{ "code": "Approved", "description": "Approved" }, { "code": "Pending", "description": "Pending" }];
            var j = 0;
            //iterate and show the jsonData in the table2 when user click on submit button
            for (var i = 0; i < mortageType.length; i++) {
                j = j + 1;
                console.log(" mortageType[i].code " + mortageType[i].code);
                document.getElementById("mortageType" + j).value = mortageType[i].code;
                document.getElementById("ord" + j).value = "";
                document.getElementById("loanNum" + j).innerText = loanNum[i].code;
                document.getElementById("status" + j).innerText = status[i].code;
            }
            document.getElementById("ord3").value = "";
        }
    }

并在HTML中更改这些行：

<input id="ord1" name="ord1">
<input id="ord2" name="ord2">
<input id="ord3" name="ord3">

我希望这是您想要的，如果没有，请说明您的要求。