javascript - 单击提交按钮时，在下拉列表中显示值的问题和用户输入的输入字段值不会被清除 - 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">

我希望这是您正在寻找的，如果不是，请说明您的要求。