如何动态生成HTML文件中的JSON表单对象？

Question

我有一个包含下拉列表和div的HTML表单。我还有几个JS文件，每个文件都包含一个使用JSON Form创建的JSON Form对象（链接：https://github.com/joshfire/jsonform）。

当我选择在这个下拉列表中的选项，我希望做到以下几点：

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. 

代码我似乎完成了第一个过程中的前三个步骤，但似乎无法完成第四个。我目前还不清楚如何完成第二个过程的第一步。

任何这些方面的帮助将不胜感激。

我当前的代码：

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的最新版本进行更新。你将需要坚持它支持的一个。工作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> 

---

既然你有jQuery你可以使用$.getScript()

虽然我还没有使用的库您可以加载脚本以这种方式。 您可能需要应用/运行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 
     } 
    } 
});