son.of.the.morning Posted August 15, 2012 Share Posted August 15, 2012 Hey peeps, does anyone know of a way were i can have a button trigger a select element on a click event. For example i would like a simple button to be clicked and the drop down options to apear. This is for mobile development (esp. iphone) Quote Link to comment Share on other sites More sharing options...
phpassassin Posted August 19, 2012 Share Posted August 19, 2012 do you mean when a button is clicked ( click event ), this button will manipulate dropdown values? Quote Link to comment Share on other sites More sharing options...
jardrake Posted August 19, 2012 Share Posted August 19, 2012 If your talking about the user clicking a button, then showing a dropdown. Look into jQuery's click and toggle functions. If your talking about automatically clicking a button, which I am assuming will execute a javascript function. Just go ahead an call that function without clicking the button. Quote Link to comment Share on other sites More sharing options...
Adam Posted August 20, 2012 Share Posted August 20, 2012 I suspect the OP wants to mimic a user physically clicking the drop-down to show the options, but not actually selecting one. I can't see this being possible to be honest. The browser won't expose an API that controls that kind of behaviour, and there's no way of faking a native event to trigger it. It has to be the user that selects it. You could of course just set focus() to it with some very obvious styling to show that it has focus, but that's about it. If you want it really bad you could create your own version of the select, but then you start running into usability issues. It annoys the hell out of me when a website has implemented their own fancy looking drop-downs which completely break keyboard control. I'm quite intrigued to know why a user clicking a button needs to do this? Why not just have them click the drop-down in the first place? Quote Link to comment Share on other sites More sharing options...
codefossa Posted August 20, 2012 Share Posted August 20, 2012 I suspect the OP wants to mimic a user physically clicking the drop-down to show the options, but not actually selecting one. I can't see this being possible to be honest. The browser won't expose an API that controls that kind of behaviour, and there's no way of faking a native event to trigger it. It has to be the user that selects it. You could of course just set focus() to it with some very obvious styling to show that it has focus, but that's about it. If you want it really bad you could create your own version of the select, but then you start running into usability issues. It annoys the hell out of me when a website has implemented their own fancy looking drop-downs which completely break keyboard control. I'm quite intrigued to know why a user clicking a button needs to do this? Why not just have them click the drop-down in the first place? It's possible .. window.addEventListener('load', function() { var button = window.document.getElementById("btn"), dropdown = window.document.getElementById("ddown"); button.addEventListener('click', function(e) { e.preventDefault(); dropdown.click(); return false; }, false); }, false); Quote Link to comment Share on other sites More sharing options...
Adam Posted August 20, 2012 Share Posted August 20, 2012 You're just triggering the DOM click event, you're not triggering the browser's native behaviour for a click. Quote Link to comment Share on other sites More sharing options...
codefossa Posted August 20, 2012 Share Posted August 20, 2012 I thought he just wanted it to open the dropdown menu? That would do it .. And I think it was supposed to be window.document.addEventListener .. but anyways.... Quote Link to comment Share on other sites More sharing options...
Adam Posted August 20, 2012 Share Posted August 20, 2012 No.. it won't. Have you tried it? Quote Link to comment Share on other sites More sharing options...
Adam Posted August 20, 2012 Share Posted August 20, 2012 And I think it was supposed to be window.document.addEventListener .. but anyways.... No you had it right the first time, the load event belongs to the window. Quote Link to comment Share on other sites More sharing options...
codefossa Posted August 20, 2012 Share Posted August 20, 2012 And I think it was supposed to be window.document.addEventListener .. but anyways.... No you had it right the first time, the load event belongs to the window. Interesting .. but we can use the size attribute instead then. Use CSS to keep it from movin' other elements around. <html> <head> <title>Test Page</title> <style type="text/css"> #drop { position: absolute; } </style> </head> <body> <input type="button" value="Open Menu" id="btn" onclick="window.document.getElementById('drop').size = '3';" /> <select name="My Menu" id="drop" size="1" onclick="window.document.getElementById('drop').size = '1';"> <option>Opt 1</option> <option>Opt 2</option> <option>Opt 3</option> </select> <br />testakjseaksdflkjasdlfkjasd </body> </html> Quote Link to comment Share on other sites More sharing options...
Adam Posted August 20, 2012 Share Posted August 20, 2012 The main problem with that is that you loose the kind of responsive positioning that the browser provides. For example when you have wide options and the drop down is near the bottom right of the screen, the browser will position and size it so it's always in view. You could obviously implement that yourself, but it would be a lot of effort for something so trivial. You'll also have cross-browser issues and the like to consider. The other problem with that is that when the options are showing, clicking outside of the menu doesn't hide it. So you've got accessibility issues to consider. Wouldn't be too difficult to get it working, but again this is all a lot of effort for something that isn't strictly needed. Quote Link to comment Share on other sites More sharing options...
Adam Posted August 20, 2012 Share Posted August 20, 2012 I'm not trying to be awkward or anything by the way. I work with UX designers every day and they point out seemingly minor issues like this all the time. When it comes to form controls especially, just stick with the browser default behaviours. Don't try to mimic or fake anything that isn't meant to happen, because you will just introduce a host of accessibility issues that will inevitably annoy someone. Quote Link to comment Share on other sites More sharing options...
son.of.the.morning Posted August 21, 2012 Author Share Posted August 21, 2012 In some cases i think it's a good thing to think outside the box and use custom controls rather than sticking to the native behaviour. There is always a way to programmatically make un-native elements work universally. Anyway that?s completely besides the point. What i was trying to explain is that I wanted to trigger the onclick event of a select element via an alternative element. (I.e. click a button and the corresponding select element will drop down). The reason behind this is I didn?t want the dropdown box to display on the iphone I just wanted a simple button which would append the value once select. Once the button would be click the iphone would then respond by showing the list items (in the iphones native way). I coded up a few lil code concoctions till i the penny dropped and i used a much more simple approach using CSS. I set the select elements opacity to 0 and placed the button over the top of it and just used a simple onChange event on the select element with simply append the button with the selected value. Works like a charm! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.