Select item from unordered list in html

Question

I have a list of items vertically. I want to select item from the list. Also, selected item will get green or any color. At a time, only one item can be selected from list. I can create the list. But, no idea how to make it selective and change color after selection by clicking mouse. Do I need to use any CSS for that?

<div class="items">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  <ul>
</div>

Rick Hitchcock · Answer 1 · 2015-10-21T13:21:49.287

Give each li element a tabindex, and add this CSS:

li:focus {
  background: lightgreen;
}

<div class="items">
  <ul>
    <li tabindex="1">Item1</li>
    <li tabindex="1">Item2</li>
    <li tabindex="1">Item3</li>
  <ul>
</div>

To do this in plain JavaScript:

Add a click event listener to the ul element.
If the event's target is an li element:
2a. If there's an existing li that's selected, remove its class.
2b. Add a selected class to the event's target.

document.querySelector('ul').addEventListener('click', function(e) {   // 1.
  var selected;
  
  if(e.target.tagName === 'LI') {                                      // 2.
    selected= document.querySelector('li.selected');                   // 2a.
    if(selected) selected.className= '';                               // "
    e.target.className= 'selected';                                    // 2b.
  }
});

.selected {
  background: lightgreen;
}

<div class="items">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  <ul>
</div>

Note that LI must be capitalized in e.target.tagName === 'LI'.

score 1 · Answer 2 · answered Oct 20 '15 at 21:24

1

The HTML

<div class="items">
  <ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
  <ul>
</div>

And the Jquery

$(".items ul li").click(function(){
    $(".items ul li").css("color","inherit");
    $(this).css("color","green");
});

http://jsfiddle.net/74g21org/1/

answered Oct 20 '15 at 21:24

Bak

252
1
3
11

Can we do it without using jQuery? – cyberoy Oct 20 '15 at 21:36
if you want to change your color when clicking an element you need jquery or javascript – Bak Oct 20 '15 at 21:38
I prefer simple Javascript. Can you please update the answer? – cyberoy Oct 20 '15 at 21:39
As @Elliott Says, its easier with jquery, javascript need more code to do it like you want – Bak Oct 20 '15 at 21:56
I am a beginner now. I am learning JS. So, I want to avoid library for learning purpose. – cyberoy Oct 20 '15 at 21:57

score 1 · Answer 3 · answered Oct 20 '15 at 21:27

1

You can use jquery as such:

$("ul li").on("click", function () {
    $("ul li").removeClass('selected');
    $(this).attr('class', 'selected');

});

.selected {
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
</ul>

answered Oct 20 '15 at 21:27

Satwik Nadkarny

4,944
2
22
40

Tha for your answer. Can we do it in other way, without using jQuery? – cyberoy Oct 20 '15 at 21:36
@cyberoy Yes. you can do it with plain JavaScript. – Satwik Nadkarny Oct 20 '15 at 21:37
@cyberoy Yes. Just give me a min. – Satwik Nadkarny Oct 20 '15 at 21:45
No problem. Please take your time. – cyberoy Oct 20 '15 at 21:45
Actually, I need to hold the selected item and store it in a variable then need to send it back to server. Simple Javascript is good choice for it I think. – cyberoy Oct 20 '15 at 21:50
@cyberoy `jQuery` would be much easier to do this. It would be lesser lines of code as well as more maintainable in the future. – Satwik Nadkarny Oct 20 '15 at 21:53
I know. But I want to avoid library. I am learning now, very beginner. I want to use Javascript for now. – cyberoy Oct 20 '15 at 21:56

score 0 · Answer 4 · answered Oct 20 '15 at 21:42

0

You can do it with plain html and css like this:

.items li:active {
    color: green;
}

http://jsfiddle.net/b8jwnfgp/1/

answered Oct 20 '15 at 21:42

Serhiy Chupryk

438
2
5
15

Thanks. But I actually need to select and hold the item. As, I need to send back the selected item to server. – cyberoy Oct 20 '15 at 21:44
In this case you really need javascript because you need to store selected item in a variable and send it either via form submission or AJAX request – Serhiy Chupryk Oct 20 '15 at 21:46
Yes, I prefer Javascript. – cyberoy Oct 20 '15 at 21:47

score -1 · Answer 5 · answered Oct 20 '15 at 21:29

To expand on Bak's response, you will need to use Javascript to apply the styles such as color.

jQuery is probably the easiest way to go about doing as he suggested. This is a good place to start: https://learn.jquery.com/about-jquery/how-jquery-works/

Also, don't forget to close your list item tags:

<li>Item1< / li>

Select item from unordered list in html

5 Answers5

Linked