javascript - 当用户按 Enter 键时，它将下拉菜单内容和文本字段数据更改为默认值

Question

我有一个表单，我需要这样的工具，用户在文本字段中输入一些数据，然后使用jquery点击输入，它应该创建新的控件，如新的文本字段、下拉菜单、文本字段。它也可以工作，但它有一个错误，例如当用户输入另一个数据并点击输入之前控件的时间值时，下拉列表和文本字段更改为其默认值。帮我解决一下

这是我的代码:

<script type="text/javascript">
function addMbo(value){
var div = document.getElementById('mboTable');
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
    event.preventDefault();
var divName = document.getElementById('mboName');
var divState = document.getElementById('mboState');
var divProgress = document.getElementById('mboProgress');

divName.innerHTML = divName.innerHTML + "<input class=form-control type=text     name=mboName value='" + value + "' id=mboNamw/>"
divState.innerHTML = divState.innerHTML + "<select class=form-control > <option value=1>In Progress </option><option <value=2>Completed</option><option  value=3>Cancled</option></select>"
divProgress.innerHTML = divProgress.innerHTML + "<input class=form-control type=text name=progress id=progress />"
document.getElementById('mboNameInput').value = null;


}
}

</script>

HTML 代码:

<div class="col-sm-4">
        <div class="row">
            <div class="col-sm-5">
                <b>Objectives</b>
            </div>
            <div class="col-sm-4">
                <b>Status</b>
            </div>
            <div class="col-sm-3">
                <b>Compl. %</b>
            </div>
        </div>
        <div class="row">
            <div id="mboTable">
                <div id="mboName" class="col-sm-5"></div>
                <div id="mboState" class="col-sm-4"></div>
                <div id="mboProgress" class="col-sm-3"></div>
            </div>
        </div>
        <div class="row" >
            <div class="col-sm-5">
            <input type="text" id="mboNameInput"  class="form-control " onkeydown="addMbo(this.value)" placeholder="Your MBO...">
            </div>
        </div>
    </div>

here is jsfiddle

Answer 1

检查以下解决方案是否适合您

$(function() {

  $("#mboNameInput").on("keydown", function(e) {
    
    if (e.keyCode == 13) {
    		var $nameDiv= $("#mboName");
        var $stateDiv= $("#mboState");
        var $progressDiv= $("#mboProgress");
        
        $nameDiv.append($("<input/>").attr("type","text").attr("value",$(this).val()));
        $stateDiv.append($("<select/>").append($("<option/>").text("InProgress")).append($("<option/>").text("Completed")).append($("<option/>").text("Canceled")));
       $progressDiv.append($("<input/>").attr("type","text"));
        $(this).val('');
    }
  		
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive">
    <tr>
    <th>Objectives</th>
    <th>Status</th>
    <th>% Comp</th>
    </tr>
        <tr>
        
    <div id="mboTable">
    <td><div id="mboName" class="col-lg-4"></div></td>
    <td><div id="mboState" class="col-lg-5"></div></td>
    <td><div id="mboProgress" class="col-lg-3"></div></td>
  </div>
  </tr>
  <tr>
  <td>
  <div class="col-lg-5">
    <input type="text" id="mboNameInput"  class="form-control "  placeholder="Your MBO..."></div>
    </td></tr> </table>