javascript - 获取数据后select元素清晰

Question

我有一个 HTML 表格，其中“抵押类型”列作为可编辑字段，用户可以在下拉列表中选择一个值，并在可用的输入字段中输入一些文本。
抵押类型下拉列表中显示的默认值为“自动”。当用户在任何行(例如第一行和第四行)中输入一些数据并单击提交按钮时，我将清除字段并显示从后端获取的数据。它按预期工作。

问题我面临的是当用户单击GetData按钮时。我正在清除用户输入的输入并显示从后端获得的数据，但是它正在清除默认值，显示在“抵押类型”下拉列表中，对于所有字段，除了我从数据库获取的值(var mortageType - 显示在第一个中)之外，所有字段都应为“自动”表格的两行..)

  $('.mortgageType').val(''); //clearing all the dropdown values and showing blank as the code suggests..

另一个问题是word-wrap:break-word;不适用于列。当值很长时，我不想扩展列大小，而是想执行 word-wrap: break-word;。但在我的代码中，当用户单击“GetData”按钮时，第一行“状态”字段中的值很长，并且正在扩展该列。我尝试在 style 属性中使用以下 CSS，但不起作用。

<div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>

演示代码(也在 Plnkr.co 上):

function submitData() {
  var flag = true;
  $('#loanTable input[type="text"]').val('');
  $('.mortgageType').val(''); //to clear the dropdown value
  $('.order').val('');
  var enablingFlag = true;
  if (flag) {
    //values from backend
    var mortageType = [{
      "code": "Home",
      "description": "Home"
    }, {
      "code": "Car",
      "description": "Car"
    }];
    var loanNum = [{
      "code": "23432",
      "description": "23432"
    }, {
      "code": "12123",
      "description": "12123"
    }];
    var status = [{
      "code": "Approved",
      "description": "Approved"
    }, {
      "code": "Pending, need more documents",
      "description": "Pending, need more documents"
    }];
    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;
      document.getElementById("mortageType" + j).value = mortageType[i].code;
      document.getElementById("loanNum" + j).innerText = loanNum[i].code;
      document.getElementById("status" + j).innerText = status[i].code;
      if (loanNum[i].code == null || mortageType[i].code == null || status[i].code == null) {
        console.log("row has null value");
        $('#status' + j).parent().parent().css({
          'border': 'red'
        });
      }

    }
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="loanTable" id="loanTable" border="1">
  <tbody>
    <tr>
      <th> <label for="show"><span name="3765" maxlength="1"class="message">Year</span></label> </th>
      <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>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType1" name="mortageType1" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord1" id="ord1" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum1"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status1" style="word-wrap: break-word;"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments1"></div>
      </td>
    </tr>

    <!--Second row-->
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType2" name="mortageType2" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord2" id="ord2" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum2"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status2" style="word-wrap: break-word;"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments2"></div>
      </td>
    </tr>

    <!--Third Row-->
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType3" name="mortageType3" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord3" id="ord3" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum3"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status3" style="word-wrap: break-word;"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments3"></div>
      </td>
    </tr>
    <!--Fourth Row-->
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType3" name="mortageType4" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord4" id="ord4" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum4"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status4"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments4"></div>
      </td>
    </tr>

    <!--Fifth Row-->
    <tr>
      <td>
        <label for="show" class="ddownlabels"></label>
        <select id="year" name="year" disabled>
          <option value="2018">2018</option>
          <option value="2019">2019</option>
          <option value="2020">2020</option>
        </select>
      </td>
      <td>
        <div class="cloneX10 indField">
          <label for="show" class="ddownlabels"></label>
          <select id="mortageType3" name="mortageType5" class="mortgageType">
            <option value="Auto">Auto</option>
            <option value="Home">Home</option>
            <option value="Car">Car</option>
          </select>
          <input name="ord5" id="ord5" class="order">
        </div>
      </td>
      <td>
        <div class="cloneX10 indField" id="loanNum5"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="status5"></div>
      </td>
      <td>
        <div class="cloneX10 indField" id="comments5"></div>
      </td>
    </tr>

  </tbody>
</table><br>
<input type="submit" value="GetData" onclick="submitData()">

Answer 1

1. 不要清除它，而是将其设置为“自动”默认值将 $('.mortgageType').val(''); 替换为 $('.mortgageType').val('Auto');
2. 您可以对第 th 标记使用 style="max-width:100px;"