asked on
Covert unorderd list with checkboxes to dropdown with checkboxes
Hello, I have an ul that contains checkboxes and I would like to have it converted to a dropdown with checkboxes and labels using Jquery or JavaScript.
How can this be accomplished if my ul looks like this?
How can this be accomplished if my ul looks like this?
<ul id="SourceIndustries">
<li class="listboxChecked">
<input type="checkbox" name="Industry" value="1" id="industry_1">
<label for="industry_1">Advertising</label>
</li>
<li>
<input type="checkbox" name="Industry" value="2" id="industry_2">
<label for="industry_2">Agriculture</label>
</li>
<li>
<input type="checkbox" name="Industry" value="3" id="industry_3">
<label for="industry_3">Banking / Finance / Investments</label>
</li>
</ul>
JavaScriptjQuery
Last Comment
Scott Baldridge
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
nice, i moved that same fiddle into codepen and it works in ie
http://codepen.io/anon/pen/wGaeWV
so i think it's just a fiddle problem,
http://codepen.io/anon/pen/wGaeWV
so i think it's just a fiddle problem,
ASKER
It is pretty cool and does work on codepen, just not in my app for some reason. When I click on the dropdown it does not open. When I inspect the dropdown it and the controls within are created correctly. I am using the latest JavaScript and Jquery.
How would I trouble shoot that kind of behavior?
How would I trouble shoot that kind of behavior?
i'd comment all the logic out, and use console.log to figure out what line it's failing at. does the console show you any java script erros?
basically, add a log and uncomment some code and see what happens.
function foo(){
var d = "bar";
console.log("working");
// more code
}
then just keep moving your log further and further out until you figure out where your problem is.
basically, add a log and uncomment some code and see what happens.
function foo(){
var d = "bar";
console.log("working");
// more code
}
then just keep moving your log further and further out until you figure out where your problem is.
ASKER
There does not seem to be any errors in the JavaScript. I will continue to look. Thanks for your effort.
hmm, try changing the html, play around with the label
also does it not work at all or just not in ie.
also does it not work at all or just not in ie.
ASKER
It is crazy. I added everything exactly as it is on codepen. The dropdown is created but when you click on it id does nothing in all browsers. Originally I thought is was my razor which is generating the <ul> but I replaced that with the list from codepen and still a no go. There are no JavaScript errors. Must be something higher in my app from another script file or something.
I will continue to test.
I will continue to test.
Thanks for your help! I looked at your examples and then found this: http://jsfiddle.net/mTSLa/222/
which is closer to what I want to do but it does not work in IE.
What do you think?