HTMLファイルでJSONフォームオブジェクトを動的に生成する方法は？

Question

私は、ドロップダウンリストとdivを含むHTMLフォームを持っています。 JSONフォーム（リンク：https://github.com/joshfire/jsonform）を使用して作成されたJSONフォームオブジェクトを含む複数のJSファイルもあります。

私はこのドロップダウンリストでオプションを選択すると、私は次の操作を実行しているよ：

1. Determine the appropriate JS file based on the option's value. 
2. Create an HTML DOM Script object using the JS file as the source. 
3. Insert the script object at the end of a list of scripts located elsewhere on the HTML file. 
4. Insert the JSON Form object listed in the JS file into the div. 

私は、リスト内の別のオプションを選択すると：それは、次の操作を行う必要があります。

を

1. Remove the previous script object and thus remove the JSON Form object. 
2. Repeat the first four steps with a different JS file. 

私が持っているコードは、最初のプロセスで最初の3つのステップを完了したようですが、4番目のプロセスを完了したように見えません。私は現在、2番目のプロセスで最初のステップを達成する方法も不明です。

これらの領域のいずれかにおける任意の助けいただければ幸いです。

私の現在のコード：

HTML

......... 

<div class="form-bottom"> 
    <div class="form-group margin-bottom-none"> 
     <select type="text" name="selections" class="select" id="selections" style="overflow: scroll;"> 
      <option value="option0">------Select One------</option> 
      <option value="option1">A</option> 
      <option value="option2">B</option> 
      <option value="option3">C</option> 
      <option value="option4">D</option> 
      <option value="option5">E</option> 
     </select> 
    </div> 
</div> 
<div class="form-group" id="target"></div> 

........ 

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 

<!-- minify later --> 
<script src="js/jsonform.js"></script> 

JS

function myFunction() { 

    var option_value = document.getElementById("selections").value; 

    var js = document.createElement("script"); 

    var last_script = document.getElementsByTagName("script").length - 1; 


    if (option_value == "option1") { 
     js.src = "js/option_folder/option1.js"; 
    } 

    js.id = "added-json"; 

    console.log(js); 

    $(js).insertAfter(document.getElementsByTagName("script")[last_script]); 

} 

$("#selections").on("change", myFunction); 

UPDATE

option1.js：

$('#target').jsonForm({ 
    schema: { 
     input1: { 
     type: 'string', 
     title: 'Input #1', 
     required: true 
     }, 
     input2: { 
     type: 'string', 
     title: 'Input #2', 
     required: true 
     }, 
     input3: { 
     type: 'string', 
     title: 'Input #3', 
     required: true 
     } 
    } 
}); 

Answer 1

UPDATE 1--

ライブラリはjQueryの最新バージョンのために更新されていないようです。あなたがサポートしているものに固執する必要があります。あなたは私はあなたがこのようにスクリプトをロードできるライブラリを使用していませんが、あなたが$.getScript()

を使用することができますjQueryを持っていることを考えるとPlunker

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script> 

---

作業。 jsonForm関数を適用/実行する必要があるかもしれませんが、完全にはわかりません。我々に教えてください。

function myFunction() { 
    var myJSForm = 'js/option_folder/' + $('#selections').val() + '.js'; 
    $.getScript(myJSForm) 
    .done(function (script, textStatus) { 
     console.log(script); 
     console.log(textStatus); 
     //$.loadTheForm();// not required 
    }) 

    .fail(function (jqxhr, settings, exception) { 
     console.log(jqxhr); 
     console.log(settings); 
     console.log(exception); 
    }); 
} 

$(function() { 
    $("#selections").on("change", myFunction); 
}) 

option1.js：

$('#target').html('');//Clear the form 
$('#target').jsonForm({ 
    schema : { 
     input1 : { 
      type : 'string', 
      title : 'Input #1', 
      required : true 
     }, 
     input2 : { 
      type : 'string', 
      title : 'Input #2', 
      required : true 
     }, 
     input3 : { 
      type : 'string', 
      title : 'Input #3', 
      required : true 
     } 
    } 
});