在 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

可以使用 html5 数据属性吗？ https://jsfiddle.net/hj6bbgbd/

<select id="mySelect" onchange="myFunction()">
<option value="1" data-text = "text for choice one">One</option>
<option value="2" data-text = "text for choice two">Two</option>
<option value="3" data-text = "text for choice three">Three</option>
</select>
<fieldset>


  <fieldset>
     <legend>My Legend:</legend>

     <p id="demo"> text for choice one </p>
   </fieldset>


<script>
function myFunction() {
  var sel = document.getElementById('mySelect');
    var opt = sel.options[sel.selectedIndex];
    document.getElementById("demo").innerHTML = opt.dataset.text;
    }
</script>

Answer 2

为此使用模板。例如：

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>

在 html 中的字段集之间动态切换

Dynamically switch between field sets in html

html

javascript

fieldset