javascript - 在html中动态切换字段集

Question

我目前有一个下拉字段，onchange 将输入值。

    function CurrentStatusChanged() {
       var currentS1 = document.getElementById("currentStatus1").value;
       var currentS2 = document.getElementById("currentStatus2").value;

       document.getElementById("currentStatusView1").innerHTML = "You selected: " + currentS1;
       document.getElementById("currentStatusView2").innerHTML = "You selected: " + currentS2;
    }

我创建了许多字段集，然后需要根据下拉框中选择的内容来显示正确的字段集。

我的问题是: 最好的方法是什么？因为我不喜欢innerHTML，所以所有的代码都是很好的做法。

 <fieldset class="employed">
<h2>Employed</h2>
<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
  <div class="col-md-4">                     
    <textarea class="form-control" id="partTime" name="partTime"></textarea>
  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>  
  <div class="col-md-4">
  <input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">

  </div>
</div>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>  
  <div class="col-md-4">
  <input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">

  </div>
</div>

我正在尝试将类似于上面的字段集添加到容器中，但是我至少有 12 个字段集根据下拉列表进行更改。 kindisch 答案不允许 mt 使用完整的字段集，但我相信这是在正确的轨道上。

Answer 1

为此使用模板。例如:

var storage = [],
    select = document.getElementById("selection"),
    container = document.getElementById("container");

select.addEventListener("change", function() {
  var _id = select.value,
      _tpl = document.getElementById(_id);

  save();
  container.innerHTML = _tpl.innerHTML;
  update();
}, false);

// Save current state
function save() {
  var _fields = container.getElementsByClassName("form-control");

  for (var i = 0; i < _fields.length; i++) {
    storage[_fields[i].name] = _fields[i].value;
  }
}

// Fill input fields of element
function update() {
  var _fields = container.getElementsByClassName("form-control");
  
  for (var i = 0; i < _fields.length; i++) {
    if (_fields[i].name in storage) {
      _fields[i].value = storage[_fields[i].name];
    }
  }
}

<select id="selection">
  <option value="status-one">One</option>
  <option value="status-two">Two</option>
  <option value="status-three">Three</option>
</select>

<div id="container"></div>

<script type="text/html" id="status-one">
  <fieldset class="employed">
    <h2>Employed</h2>
    <!-- Textarea -->
    <div class="form-group">
      <label class="col-md-4 control-label" for="partTime">If Part Time, please detail your contractual hours per week</label>
      <div class="col-md-4">
        <textarea class="form-control" id="partTime" name="partTime"></textarea>
      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="numberOfJobs">Number of Jobs</label>
      <div class="col-md-4">
        <input id="numberOfJobs" name="numberOfJobs" type="text" placeholder="" class="form-control input-md" required="">
      </div>
    </div>

    <!-- Text input-->
    <div class="form-group">
      <label class="col-md-4 control-label" for="jobDescriptionTitle">Job Description / Title</label>
      <div class="col-md-4">
        <input id="jobDescriptionTitle" name="jobDescriptionTitle" type="text" placeholder="" class="form-control input-md" required="">
      </div>
    </div>
</script>

<script type="text/html" id="status-two">
  <p>This is status two.</p>
</script>

<script type="text/html" id="status-three">
  <p>This is status three.</p>
</script>