Question

如果在其他地方重复，请原谅，我不知道它叫什么，所以不确定如何寻找它！

我正在创建一个javascript / jquery / ajax html页面编辑器，我可以通过鼠标点击选择和添加html元素。要跟踪元素，我将它们保存在选择下拉元素中。首先，那里有什么开源，已经这样做了吗？如果没有，我遇到的问题是如何跟踪父/子元素，其他div标签内的div标签等。我到目前为止，处理添加元素，将添加一个子，但我想添加更多的功能，喜欢将孩子加入另一个孩子。到目前为止，这是我的代码：

 $("#make_child").click(function() {
     var selected_element = $('#elements option:selected').val();
     var element_index = $("#elements").prop('selectedIndex');

    if( element_index > 1 ){
        var index_count = element_index -1;
        var re = selected_element.split("|");
        var parent_element = re[0];
        var se = re[1];

        var v = $('#elements option').eq( index_count ).val();
        var re = v.split("|");

        var previous_element_parent = re[0];
        var previous_element = re[1];

        //element is not child
        if( parent_element == 0){
            while( previous_element_parent != 0 && index_count > 0 ){
                index_count --;
                v = $('#elements option').eq( index_count ).val();
                re = v.split("|");
                previous_element_parent = re[0];
                previous_element = re[1];
            }

            if( previous_element_parent == 0 ){
                parent_element = previous_element;
            }else parent_element = previous_element_parent;
        }else{
            if( previous_element_parent != 0 && parent_element != previous_element )    parent_element = previous_parent;
            else if( previous_element_parent != 0 ) parent_element = previous_element_parent;
            else parent_element = previous_element;
        }

        $.post( "gpp.php", { 
            what : "create_child",
            parent_element : parent_element,
            selected_element : se
        }, 
        function( data ){ 
            var r = data.split("|");
            var is_child = "";
        $("#response").html( "Adopting element: ((" + data + "))" );
            if( r[0] == -1){
                $("#response").html( "Error: " + data );
            }
            else{
                $('#elements option').eq( element_index ).val( r[2] + "|" + r[0] );

                if( previous_element_parent != 0 && parent_element == previous_element )    is_child = "<?php print ICON_CHILD; ?>";

                $('#elements option').eq( element_index ).html( is_child + "<?php print ICON_CHILD; ?>" + r[3] );
            }
        });
    }
    else{
        $("#response").html( $("#response").html() + ", *Error, can't make child, there is no element available to adopt it!" );
    }
 });

下拉选项值跟踪元素id，因为通过|分隔的两个值，例如id为1的父元素和id为2的子元素将为：

 <option val="1|2">Child element</option>

添加了jsfiddle https://jsfiddle.net/zothen/5sp50eow/

让孩子工作，但我如何生孩子？

javascript动态创建选择树

0 个答案: