Member Avatar for K?!

Hi all

I was wondering if there was something like Java's JList in HTML.
I guess not because I can't find anything like it in the list of the form's input types.
What is the easiest way to provide the functionality of a JList?

Thx in advance.
Greetings, K?!

Ps: I'm pretty new to web development so, uhm, keeping it simple would be appreciated ;-)

EDIT:
I'm having an other question about this.
In Java, it's possible to add classes to the JList (so you can access the class itself when an item is selected in the JList), will this be possible with the alternative I've asked for? And if not, I will probably need to create the class by getting an ID value from the "list's" selected value and then creating the class with data from the database, how would I have to insert ID value's into the list (and access them from the list), without them being visible for the user?

  • 2 Contributors
  • 2 Replies
  • 467 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by K?!

Dani AI

Generated

Good start — 's suggestion to use a native HTML list control is the simplest and most robust approach for a beginner. Important conceptual difference: a Java JList can hold real objects; HTML form controls only submit strings. The usual pattern is to store a row ID in the option value and either (a) let the server re-create the corresponding class/data when the form is submitted, or (b) fetch the full object via AJAX when an item is selected for a smoother UI.

If you want more “object-like” behavior in the browser, two practical options work well:

  • Attach small bits of metadata to the element with data-* attributes (for quick display), or
  • Keep a JavaScript map keyed by ID that holds full client-side objects and populate it from the server (initially or on demand). Rendering the list as a set of clickable <li>s gives you more control than <option> elements if you need custom layouts or multi-column display.

A simple, progressive workflow to try:

  • Server: render options with value = ID so PHP can find the record.
  • Client: listen for change on the select (use change, not click), collect selected IDs (use name="items[]" + multiple for multi-select) and request JSON from the server.
  • Client: use the returned JSON to instantiate client-side objects or update the UI.

Example pattern (illustrative):

<select id="myList" name="items[]" multiple>
  <option value="1" data-short="foo">Item A</option>
  <option value="2" data-short="bar">Item B</option>
</select>

<script>
document.getElementById('myList').addEventListener('change', e => {
  const ids = Array.from(e.target.selectedOptions).map(o => o.value);
  fetch('/getItems.php', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({ ids })
  }).then(r => r.json()).then(items => {
    // items is an array of objects you can use to update the page
  });
});
</script>

Final cautions: option values are visible in the page source — never put secrets there. Always validate IDs and use prepared statements server-side. For now, , rendering IDs and using PHP is a solid first step; add AJAX later for a better user experience.

Recommended Answers

All 2 Replies

Member Avatar for Phaelax

Here's how you'd create a list:

<select name="jlist" onlick="function()" size="3">
<option value="A">Item A</option>
<option value="B">Item B</option>
<option value="C">Item C</option>
</select>

You can only return whatever value you have in the double quotes, but you can use that information to retrieve a specific class if you need. Write a javascript function that runs when a user clicks on the selection. Based on the value selected, you can do "switch" statement perform whatever operations you need. If you have to retrieve information from a database and don't want to have to refresh the page, look into ajax.

Member Avatar for K?!

Ok, thx.
I think I'll be trying using Id's as value and then using php to get the classes, ajax would probably give a better result, but since I'm just starting with web development I'm going to try to keep it simple :).

Thx again for the clear and useful reply.

Grtz, K?!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.