フィールドセットを動的に切り替える

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>

Answer 2

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>