获取点击的<li>的ID

I have a dropdown list of items:

<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Räume <span class="caret"></span></a>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content -->
</ul>

.. where the generated elements look like this:

<li class='LiRoom' id='Room 1'><a href='#'>R101</a></li>
<li class='LiRoom' id='Room 2'><a href='#'>R102</a></li>

.. and I want to display database entries on my website, depending on the selected <li> item's ID:

$(document).ready(function(){
  $("#Room").click(function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          document.getElementById('accordion').innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET", "GetRoomComponents.php?q=1", true);
    xmlhttp.send();
  });
});

The 1 of GetRoomComponents.php?q=1 needs to be replaced with the <li>'s ID. But how do I access the correct one?

This answer https://stackoverflow.com/a/3545356/5790966 (replacing "#Room" with "#Room li") didn't work. If I do that, the entire function doesn't execute (tested on the latest Chrome).

Since you are clicking on li a element, use it as click event in jQuery.

jQuery('#Room').on('click', 'li a', function() {
    var liId = jQuery(this).parent().attr('id').replace('Room ', ''); //Read ID of current pressed LI:

    console.log(liId); Prints either 1 or 2
});

Firstly, you may as well use jQuery to make your AJAX request if you've already got it loaded; it's much simpler logic.

To address your issue, you can attach a delegated click() handler to all the li a elements, then use the this keyword to reference the one which raised the event. You can then read the prop('id') from the parent li. Try this:

$("#Room").on('click', 'li a', function(e) {
  e.preventDefault();
  var liId = $(this).closest('li').prop('id');
  $('#accordion').load('GetRoomComponents.php?q=' + liId);
});

Don't handle click on "Room" because that doesn't give you access to the child element which may have been a target of the click as well.

Instead you can do it on the "LiRoom" class.

$(".LiRoom").click(function() {
  var id = $(this).attr("id"); //gets you the Id of the clicked element
  //...then your ajax code goes here
});

Note that your IDs are invalid - they cannot have spaces in them. Amending them to the form RoomX e.g. Room1, Room2, will conform to the HTML spec.

N.B. If the <li> elements are created after the page loads (and therefore after the click event handler has been initialised), then you can use delegated event handling, which will pick up any elements matching the secondary selector which are added later. Like this:

$("#Room").on("click", ".LiRoom", function() {
  var id = $(this).attr("id"); //gets you the Id of the clicked element
  //...then your ajax code goes here
});

Here's a working example:

$(function() {
  $("#Room").on("click", ".LiRoom", function() {
    var id = $(this).attr("id"); //gets you the Id of the clicked element
    alert(id); //just for demo
    //...then your ajax code goes here
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content -->
  <li class='LiRoom' id='Room1'><a href='#'>R101</a></li>
  <li class='LiRoom' id='Room2'><a href='#'>R102</a></li>
</ul>

</div>

Send event to your function like

$("#Room").click(function(e) {
    console.log(e.target.id);
....

Try attaching your event handler to the li instead of the #room, so you can capture $(this) id.

Also, ad mentioned above: If you're using jQuery, also use its AJAX features.

Also #2: Make sure your IDs are valid, spaced in IDs are not valid.

$(document).ready(function(){
  $("#Room li").click(function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
          document.getElementById('accordion').innerHTML = this.responseText;
      }
    };
    console.log($(this).attr('id'));
    xmlhttp.open("GET", "GetRoomComponents.php?q=" + $(this).attr('id'), true);
    xmlhttp.send();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Räume <span class="caret"></span></a>
<ul class="dropdown-menu" id="Room">
  <!-- Auto-Generated: Dropdown content --><li class='LiRoom' id='Room 1'><a href='#'>R101</a></li>
<li class='LiRoom' id='Room 2'><a href='#'>R102</a></li>

</div>