Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

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?
0
Evan Cutler
Asked:
Evan Cutler
  • 5
  • 4
  • 2
2 Solutions
 
Gurvinder Pal SinghCommented:
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
WilliamStamCommented:
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now