获取li值并POST到ajax

Question

I have a treeview list, and I want to send the id of li select with ajax but I don't know why this code doesn't works

The code: http://jsfiddle.net/esS4k/379/ (old)

The new code(http://jsfiddle.net/esS4k/385/), try it, the alert on li value is "undefined"

-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'];?>

Have a good day

EDIT: I think, the problem is because of the list structure

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

With the event

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

I have 2 alerts (1 with the "li" id and 1 with nothing)

Answer 1

The following code will do the work for you. You just need to add test to all the child 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);                                 
        }
    });            
});

NOTE : Tested the same in your fiddel, please check http://jsfiddle.net/esS4k/380/

Hope that helps.