I'm in the final stages of my project/homework, and I came across a little problem. My homework was to create three dynamically generated drop-down menus; however the third menu is not updating based on the choices of the second menu, rather it is creating another menu. The second menu updates correctly based on the choices of the first menu. Can someone tell me what's wrong? There is a JSFiddle demo in the comments. Thank you all!
The problem is that you are not removing div with id="heroes" before you create another one. Your call to removeSiblings(x); does not remove div#heroes because div#heroes is not a sibling of select#myTeams. For div#heroes to be a sibling of select#myTeams you have to append it to div#teams instead of to div#stepOne. You would have to change line 108 of your fiddle:
document.getElementById('team').appendChild(heroDiv);
This will fix your issue with updating the third menu by selecting in the second, but you will have a similar issue with the form that renders when the user selects from the third menu.
Related
I'm making custom Accordion with custom sub items as radio buttons. As you can see, I already create the accordion but stuck in selection of the sub item.
The issue is the when I select one item then all sub-items under that main accordion tab are selects. I want the particular one should be selected when select and the default the first one should be selected when anyone comes to this page like as first accordion tab is expanded and first sub-item should be selected.
Please help me. Below is the full code expo link mentioned:
https://snack.expo.dev/#john.ocean/crabby-churros
Screen shot of the issue is below:
checkout the updated code here : https://snack.expo.dev/T1q7WFzPP
Had some issues with the logic of your subcategory item selection. And thanks for providing expo link.
I have a very complicated Javascript/JQuery Leaflet map. There is supposed to be a Leaflet control with a dropdown select box. The select box pulls it's content via AJAX. It pulls the content correctly and the generated HTML is fine and can be seen. If I use the keyboard to highlight the select menu, I can use the arrow keys to change the value. However, I can't click on the select menu and see the drop down box. The click is being captured fine(checked with JQuery .click()).
I can't share the specific code because I'm not sure what's wrong and I can't share the whole thing because of security issues. So, my question is a little more general:
What kinds of errors/bugs should I be looking for if a select dropdown menu is not showing on click? What are various things I can check to see what is wrong?
Thanks.
Nevermind - known issue with Leaflet. Custom Control not working
I posted awhile ago and got great insight on hide/show text with javascript... Now I need to take this one step further. Can't find the right combination to make it work.
Here's what I NEED:
When a viewer comes to this page, the first hide/show element is displayed in the text box AND
That element is also highlighted a certain color to display that it is active.
Lastly, as every hide/show element is clicked, that stays highlighted until the next is selected.
Here's a link to my dev site. I think it's easier this way.
http://verus.exigodigital.com/services/
Here was my previous post on the hide/show text:
Showing & Hiding Text with Javascript
REALLY appreciate the help, guys! :)
You could make 2 CSS definitions, one for the currently selected textbox, and one for textboxes that aren't selected
When someone clicks on one of the textboxes to edit its contents (the onfocus event), you just call a function that runs through all of your textboxes, and for each one checks if it's the one with focus - if it is, set the className variable of the element to "selected" or something, and it it's not the one with focus then set it's className variable to "normal" or something
If I didn't understand the question or you need more info, just let me know :)
Hello my name is Shane,
I am coding a custom website. I have built a contact form and am using SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/) for my drop-down feature. I have several Input Fields, two buttons and one Select Box (drop-down). I have the form working perfectly, my issue is with the TabIndex. I have the correct tabindexs coded in each Input, but when I tab to the Select Box it gets ignored.
Here is the page: http://www.lightupco.com/contact.htm
NOTE: you have to click the Envelope/Pen icon to reveal the form.
The only clue I have from researching a forum with similar issue, is it has something to do with the underlying UL throws the tab index off.
I'm not sure what code from my page to include here, to get help figuring this out?
Hey Shane I wrote SelectBoxIt. The reason your select box tabindex is getting ignored is because SelectBoxIt hides the original select box and replaces it with new HTML that is easier to style (a div element). Hence, the tabindex attribute is not being set on the visible drop down (the div element), only the hidden select box.
If you don't mind creating an issue on Github, I would be happy to add a feature to SelectBoxIt that copies any tabindex attribute on the original select box to the new visible drop down. That should solve your issues.
The selectbox has index 0. If you click in the Name: input, your index is 1, so, your indexes as wrong.
Why using tabindex, after all? -.-
How can a checkbox inside a drop down menu using javascript to be implemented so that every time you click the menu to change situation?
The website you have linked presents a list along this lines: http://jsfiddle.net/XJWkH/
Of course this is just a raw example but basically this is the way the dropdown list on the site works. When you click on a dropdown/submenu element, jQuery adds or removes 'checked' class on that element.
jQuery is the easiest path here. I have used this plugin with great success and have rolled my own as well.
Good luck!