How to style radio buttons to have no buttons, but to be highlighted

Greetings.

I am trying to develop an app using JQUERY, where I need the functionality of a drop down, but the look of a unordered list.  An unordered list has no value attrib, but I need it to look like one.

JQUERY has an "Onclick" function, which I can grab the click and do something, but I have no values associated with the list.  Help?
LVL 9
Evan CutlerVolunteer Chief Information OfficerAsked:
Who is Participating?
 
Gurvinder Pal SinghConnect With a Mentor Commented:
if you have a list
<ul>
   <li>option1</li>
   <li>option2</li>
   <li>option3</li>
</ul>

you need to convert it to

<ul class="dropdown">
   <li>option1<span style="display:none">1</span></li>
   <li>option2<span style="display:none">2</span></li>
   <li>option3<span style="display:none">3</span></li>
</ul>


now you can assign the onclick event on the list like this

$(".dropdown li").bind("click", function(){
   alert("value is: " + $(this).find("span").html());
});

0
 
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
BRILLIANT!!!

GENIUS...Pure Genius...
Awesome....It's always the little stuff that gets you.

0
 
Gurvinder Pal SinghCommented:
Thanks for the kind words. Glad to help :)
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
WilliamStamConnect With a Mentor Commented:
you better off with

<ul>
   <li rel="1">option1</li>
   <li rel="2">option2</li>
   <li rel="3">option3</li>
</ul>

.attr("rel")


$(".dropdown li").bind("click", function(){
   alert("value is: " + $(this).attr("rel"));
});

soz gurvinder372 :( i shamelessly copy pasted from yours..

reason its better... you can control exactly what goes there.. and also there might be a few issues using the span approtch.. also for performance wise its better refrencing a tag instead of finding a span inside..

you could also give sudo attributaries to the li's like a value 1... but thats not valid HTML (works in all the browsers tho)

rel is a valid attr. your code will pass validation :)
0
 
WilliamStamCommented:
this should work fine... will alow you to create a style of

#dropdown .selected {background-color:#f00; } or something... that you have a visual representation of which 1 is selected

.click is the same as .bind("click" i just prefer using the .click way... reads better
$("#dropdown li").click(function(){
	$("#dropdown .selected").removeClass("selected");
	var $this = $(this);
	$this.addClass("selected");

		alert("value is: " + $this.attr("rel"));
});


<ul id="dropdown">
   <li rel="1">option1</li>
   <li rel="2">option2</li>
   <li rel="3">option3</li>
</ul>

Open in new window

0
 
WilliamStamCommented:
http://www.jsfiddle.net/wmpDw/

that should show a themed version of it...

css im using with above is attatched
#dropdown {
    margin:0px;
    padding:0px;
}
#dropdown li {
    display:block;
    padding:3px;
    cursor:pointer;
}
#dropdown li.selected {
    background-color:#6FF;    
}
#dropdown li:hover {
    background-color:#FFC;
}

Open in new window

0
 
Gurvinder Pal SinghCommented:
i would rather use the id attribute than rel, since i am not sure if rel is a valid attribute for li
http://www.w3.org/TR/html401/struct/lists.html

i would make it

<ul>
   <li id="ul_li_1">option1</li>
   <li id="ul_li_2">option2</li>
   <li id="ul_li_3">option3</li>
</ul>

$(".dropdown li").bind("click", function(){
   alert("value is: " + $(this).attr("id").substring(6));
});

0
 
WilliamStamCommented:
interesting enough...

li value="" is valid..

http://validator.w3.org/check

hehe time to start using value instead of rel on my li's now :D

thanks for pointing it out gurvinder372
0
 
WilliamStamCommented:
doctype html 4 or xhtml Transitional! value is fine... but the strict ones fail again... depends on your doc type
0
 
Gurvinder Pal SinghCommented:
actually as per the previous link i had shared, 'value' is deprecated
0
 
Evan CutlerVolunteer Chief Information OfficerAuthor Commented:
Thank you guys for the responses...there is some incredible knowledge here.  I love this site.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.