Question

我有一个树视图列表，我想用ajax发送li select的id，但我不知道为什么这段代码不起作用

新代码（http://jsfiddle.net/esS4k/385/），尝试一下，li值上的提示是＆＃34;未定义＆＃34;

-HTML

<div id="content_table">
  <ul id="treeview">
  <li data-expanded="true">Item 1
      <ul>
          <li id="11">Item 1.1
            <ul>
              <li id="111">Item1.1.1</li>
              <li id="112">Item1.1.2</li>
            </ul>
           </li>
          <li id="12">Item 1.2</li>
      </ul>
  </li>
  <li data-expanded="true">Item 2
      <ul>
          <li id="21">Item 2.1</li>
          <li id="22">Item 2.2</li>
      </ul>
  </li>
 </ul>
</div>

-jQuery / AJAX

$(document).ready(function () {
$('#treeview').change(function () {
    $.ajax({
        url: "ldtree2.php",
        method: "POST",
        data: 'choice' + $("ul[name='treeview']>option:li.selected").val(),
        dataType: "html",
        success: function (data) {
        $('#content_table').html(data);                                 
        }
    });
}); 
});

-ldtree2.php

<?php echo $_POST['choice'];?>

度过美好的一天

编辑：我认为，问题在于列表结构

**<li>** <ul><li></li><li></li></ul> **<li>**

事件

    $('#treeview li').on('click',function(){         
        alert( this.id);         
})

我有 2 提醒（1＆＃34; li＆＃34; id和1无提示）

Answer 1

您应该使用“value”属性而不是id来保存您的值，然后.val（）将为您提供值。

var treeview = $("#treeview").kendoTreeView({
    select: function (e) {
        // When a node is selected, display the text for the node in the dropdown and hide the treeview.
        $dropdownRootElem.find("span.k-input").text($(e.node).children("div").text());
        $treeviewRootElem.slideToggle('fast', function() {
            $treeviewRootElem.removeClass("k-custom-visible");
        });
        // get data from selected node (taken from treeview api documentation)
        var data = $('#treeview').data('kendoTreeView').dataItem(e.node);
        //Better put this in a extra function
        $.ajax({
            url: "ldtree2.php",
            method: "POST",
            data: 'choice' + data.id, //u can get the id from the node data 
            dataType: "html",
            success: function (data) {
                $('#content_table').html(data);                                 
            }
       });
    }
}).data("kendoTreeView");
var $treeviewRootElem = $(treeview.element).closest("div.k-treeview");

在你的小提琴中你使用Kendoo Treeview，所以你应该在你选择的部分处理这个。

"name": "[toLower(parameters('Name'))]"

Answer 2

查看此示例代码。希望它能帮到你。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $( document ).ready(function() {

        $( ".list" ).click(function(event) {
            event.stopImmediatePropagation();

            var list_id = $(this).attr('id');
            console.log('list_id : '+list_id);

            $.ajax({
                method: "POST",
                url: "server.php",
                data: { list_id: list_id}
            }).done(function( response ) {
                console.log('Response Data', response);

            });
        });

    });
</script>
</head>
<body>

    <div id="content_table">
        <ul id="treeview">
            <li data-expanded="true">Item 1
              <ul>
                  <li class="list" id="11">Item 1.1
                    <ul>
                      <li class="list" id="111">Item1.1.1</li>
                      <li class="list" id="112">Item1.1.2</li>
                    </ul>
                   </li>
                  <li class="list" id="12">Item 1.2</li>
              </ul>
            </li>

            <li data-expanded="true">Item 2
              <ul>
                  <li class="list" id="21">Item 2.1</li>
                  <li class="list" id="22">Item 2.2</li>
              </ul>
            </li>
        </ul>
    </div>

</body>
</html>

Answer 3

尝试此代码，不确定它是否有效。

        $(document).ready(function () {

        var option_data=$("ul#treeview>option:li.selected").val(); // this line according to @JoshulSharma
        var formData = {
        'choice' : option_data,
        };

        $('#treeview').change(function () {
            $.ajax({
                    url: "ldtree2.php",
                    method: "POST",
                    data: formData,
                    dataType: "html",
                    success: function (data) {
                    $('#content_table').html(data);                                 
                }
            });
        }); 
    });

PHP部分

echo $_POST['choice'];

Answer 4

以下代码将为您完成工作。您只需将test添加到所有子ul

即可

var data={ choice:$(this).attr('id') };
$('#treeview .test li').on('click',function(){          
        $.ajax({
        url: "ldtree2.php",
        method: "POST",
        data: data,
        dataType: "html",
        success: function (data) {
        $('#content_table').html(data);                                 
        }
    });            
});

注意：在您的fiddel中测试相同内容，请查看http://jsfiddle.net/esS4k/380/

希望有所帮助。

Answer 5

我已经让你更新了小提琴，并找到了你的错误替换以下两行：

var data = $('#treeview').data('kendoTreeView').dataItem(e.node);
alert(data.id);  //undefined !!

使用：

var data = $(e.node).attr('id');
alert(data);

编辑：
刚刚发现你的$ .ajax也应该略有改变数据选项应如下所示：

data: {choice : data},

获取li值并POST到ajax

5 个答案: