jQuery onChange 使用 AJAX 将 select 的值发送到 JsTree

Question

我正在尝试将 select 的值发送到名为 "response.php?operation=get_node&idcuatrimestre=..." 的文件（此 returns JSON JsTree 代码与 returns 不同结果取决于第二个参数 "idcuatrimestre")。问题是使用 AJAX 如果你发送参数但不知道如何刷新 JsTree 以便它更改所述

的值

<form method="post">
    <select name="idcuatrimestre" onchange="fetch_select_left(this);" class="select">
        <option>Please Select</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</form>

<div id="test-result">#nc</div>

<div id="tree-container"></div> <!-- Here load the JsTree menu -->

<script>    <!-- Send to response -->
    function fetch_select_left(idcuatrimestre){
        var idc = idcuatrimestre.value; //alert(idc);   //value of Select
        $.ajax({
            url: "../ajax/jstree/response.php",
            data: { operation: "get_node", idcuatrimestre: idc }, //Equals to:  "response.php?operation=get_node&idcuatrimestre=..." + idc,
            type: "GET",
            success: function(html){
                //alert(html);
                $("#test-result").html(html);   //Here it does a test, it just returns the value of the select and writes it in a div #test-result
                //This is where in theory I should refresh JTree with the new value but I do not know how
            }
        });
    }
</script>

这就是我在进入页面时初始化JsTree的方式

<script type="text/javascript">
    $(document).ready(function(){ 
        //fill data to tree  with AJAX call
        $('#tree-container').jstree({
            'core' : {
                'data' : {
                    'url' : '../ajax/jstree/response.php?operation=get_node',   //Final
                    'data' : function (node) {
                    return { 'id' : node.id, 'text' : node.text };
                },
                "dataType" : "json"
            }
            ,'check_callback' : true,
            'themes' : {
                'responsive' : false
            }
        },
        'plugins' : ['state','contextmenu','wholerow','search']
        })
        .on('create_node.jstree', function (e, data) {
            $.get('response.php?operation=create_node', { 'id' : data.node.parent, 'position' : data.position, 'text' : data.node.text })
                .done(function (d) {
                    data.instance.set_id(data.node, d.id);
                })
                .fail(function () {
                    data.instance.refresh();
                });
            }).on('rename_node.jstree', function (e, data) {
                $.get('response.php?operation=rename_node', { 'id' : data.node.id, 'text' : data.text })
                    .fail(function () {
                        data.instance.refresh();
                    });
                }).on('delete_node.jstree', function (e, data) {
                    $.get('../ajax/jstree/response.php?operation=delete_node', { 'id' : data.node.id })
                        .fail(function () {
                            data.instance.refresh();
                        });
                    })
                    //Solo para trabajar con un nodo a nivel "cargas": ...

                    //No todos los nodos tienen habilitado el plugin "contextmenu"
                    .on('show_contextmenu.jstree', function(e, reference, element) {
            //                  if ( reference.node.parents.length < 1 || reference.node.parents.length > 1 //Este solo deshabilita los planes
                                if (  reference.node.parents.length < 1 || reference.node.parents.length > 1 || reference.node.parents.length > 1  
                                // || reference.node.parents.length > 2 
                                ) {
                                      $('.vakata-context').remove();
                                };
                            })

                //Links
            //              .on("activate_node.jstree", function (e, data) {
                            .on("activate_node.jstree", function (e, data) {
                                if(data.node) {
                                    var href = data.node.a_attr.href;
                                    window.location.href = href;
                                }
                            })                

            });
</script>

两个部分都有效，但我想将其结合起来，以便 jsTree returns JSON 根据 Select 的选项不同。我希望你已经很好地解释了我，请你能帮助我。谢谢

Answer 1

由于您使用 AJAX 加载数据，因此刷新 jsTree 将触发配置 core.data.url 中定义的 url。因此，当 select 输入的值发生变化时，您应该将 'idcuatrimestre' 添加到 jstree ajax 回调中，然后刷新树。然后 refresh 方法使用新的回调刷新整个树。

function fetch_select_left(sel){
    var oTree = $('#tree-container').jstree(true);
    var idc = sel.value;
    oTree.settings.core.data = {
        'url' : '../ajax/jstree/response.php?operation=get_node',   //Final
        'data' : function (node) {
            return { 'id' : node.id, 'text' : node.text, idcuatrimestre: idc };
        }
    };
    oTree.refresh();            
}

jQuery onChange 使用 AJAX 将 select 的值发送到 JsTree

jQuery onChange send value of select to JsTree using AJAX

php

jquery

ajax

jstree