从 JsTree 选择填充文本字段

Question

我正在尝试找出一种方法，将选择从 JSTree 传递到基本 HTML 表单。（然后由 Flask 和 Wtforms 使用）。我已经能够将它传递给控制台日志，但我不确定如何将其返回到表单中。

对 JS 比较陌生，所以请放轻松，但我不知道该怎么做。

<label for="folderpath">Folder Path:</label>
<input type="text"  id="folderpath" name="folderpath" value="">
<br>
<div id="container"></div>

<script id="jstree1" name="jstree1">

    $('#container').jstree({

    'core': {
        "themes": {
                "name": "default",
                "dots": true,
                "icons": true

            },        
        'data': {
                    'url': "static/JSONData.json",
                    'type': 'GET',
                    'dataType': 'JSON',
                }
                }
            });var folderpath =
        $('#container').on("changed.jstree", function (e, data) {
      console.log(data.instance.get_selected(true)[0].text);
});
 </script>

编辑我尝试使用#folderout。但是当使用 input type="text" 标签时它不起作用。

   <label for="folderout">Folder Path</label>
   <input type="text" name="folderout" class="form-control" id="folderout" >

       $("#container").on("select_node.jstree", function (evt, data) {
       var number = data.node.text
       $('#folderout').html(number);

Answer 1

 <label for="folderout">Folder Path</label>
 <input type="text" name="folderout" class="form-control" id="folderout" >

<script id="jstree1" name="jstree1">

                                $('#container').jstree({
                                    'core': {
                                        "themes": {
                                            "name": "default"
                                            , "dots": true
                                            , "icons": true
                                        }
                                        , 'data': {
                                            'url': "static/JSONData.json"
                                            , 'type': 'GET'
                                            , 'dataType': 'JSON'
                                        }
                                    }
                            });
{ /*  --- THIS IS FOLDER SELECTOR FOR ID "folderout" --- */
$("#container").on("select_node.jstree", function (evt, data) {
var number = data.node.text
document.getElementById("folderout").value = number;  });};
</script>

这里的最后一部分成功了。将 data.node.text 转换为变量。然后使用 getElementById 将变量带入 html。现在，当您单击一个节点时，它将填充该文本字段。

从 JsTree 选择填充文本字段

Populate text field from JsTree selection

html

javascript

jstree