Question

我试图想出一种方法将选择从JSTree传递给基本的HTML表单。（然后由Flask＆amp; 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>

EDIT 我尝试使用#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选择中填充文本字段

1 个答案: