select drop down not showing - javascript

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

Related

How to select an item from a drop down menu on a website that's coded with an html input text object?

I'm trying to build a Chrome Extension that autofills a website form. The form has several drop down menus. However, these are not coded with the HTML select object. Instead, they're coded with the HTML input text object (see the attached photo) (https://i.stack.imgur.com/6FynG.png).
I'd like to build functionality that mirrors selectedIndex and select one of the drop down menu items.
Is this possible?
I've tried 3 things:
I've used .execCommand to mimic the user typing into the input box to narrow down the number of drop downs that appear. This isn't a complete solution because the user must still click on the drop down menu.
I've used .innerHTML and similar methods to change the websites HTML, so that it matches the output of when a user selects an option from the drop down menu. This makes the website look like the user has selected an option, but it doesn't full work either. As soon as the user clicks outside of the input field, the field revers back to being empty (maybe the form is refreshing?)
I've explored using Selenium, but I don't think it makes much sense here. I'm trying to build a Chrome Extension for other users, rather than automate testing.

Making an editable options box in HTML (Possible Javascript)

I want to create a drop down menu (like an <options> tag) in an HTML form. The issue is that I also want the user to be able to not only select from a list of options, but also type in their own if they want. So it would almost be like there was a text field that was automatically filled when you selected something from the drop down box, but you could still edit it.
This is the sort of thing I mean, only its a desktop app on windows (notice how the text can be edited):
I'm pretty flexible about exactly how it looks. If there is another, easy to implement, solution where the user can easy scroll/see a list of options or add in their own that doesn't look like what I described, I'm open to the idea.
Most of the drop down auto type scripts out there will let you type into the input box text that doesn't have to match one of the options in the options list. Just when you go to submit the form be sure to check to see if there is a selectedValue in the drop down and if not grab the drop down's text instead. How to do this will vary on what script you are using. As to what type ahead drop down script to use there are plenty out there, here is an ancient one that works pretty well but there are lot's of others.
http://trappedinhoth.blogspot.com/2008/07/jquery-autocomplete-example.html
HTML 5 even supports an autocomplete drop down
http://trappedinhoth.blogspot.com/2013/03/html-5-datalist-key-value-work-around.html
I hope that points you in the right direction.

can't tab in SelectBoxIt

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? -.-

Check box inside drop down menu with javascript

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!

Showing different objects depending on user selection in menu

I have html code where dropdown menu has several values including "Custom". I would like to have different html content below dropdown menu depending on user selection. If user chooses "Custom" value then I need to show one more dropdown menu and two editboxes and if in any other cases I need to show only one editbox.
As I understand I need to use onchange() event and javascript code. Is that right?
Could you please advice?
Thank you.
It seems like you are just getting started with this. Yes, you are probably going to end up using javascript for this. You need to understand that javascript is used to
Modify the DOM (i.e. the html) on the page dynamically
Detect events that happen on different elements of the DOM(e.g. a div or the window).
among other things.
The change event is only one event. Depending on the requirements, you might want to use change, but you might want to show the submenu when the user hovers the pointer over Custom.
Be aware that there are probably libraries you can use to show menus with submenus.
If you want to roll your own, you should try the following:
Show a div that looks like a popup when the user clicks a button or some area of the screen.
Populate the popup with the menu options
Detect when the user mouse-over or clicks the 'Custom' option.
Display the submenu.

Categories

Resources