I'm trying to press enter (programmatically) on a drop down element. I CANNOT USE JQUERY.
The drop down is already in focus, I just want to click enter to open it.
Any ideas how it can be achieved?
Here's my HTML:
<select class="test">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
<option value="5">item5</option>
<option value="6">item6</option>
</select>
And the JS that got the element focused:
document.getElementsByClassName('test')[0].focus();
var element = document.getElementsByClassName('test');
element.onclick.apply(element);
Related
I have implemented the following multiselect into my project.
http://loudev.com/
And I have done everything as I should (as far as I know) the layout is looking as it should, the css and javascript is running but when i hover over an option, it isn't clickable, it treats it as a line of text, not a clickable object.
Here is the code for the select input and where it is initialised in javascript.
<select multiple="multiple" class="form-control" id="my-select" name="my-select[]">
<option value="elem_1">elem 1</option>
<option value="elem_2">elem 2</option>
<option value="elem_3">elem 3</option>
<option value="elem_4">elem 4</option>
<option value="elem_100">elem 100</option>
</select>
$('#my-select').multiSelect();
I'm trying to setting up a dropdown menu selector.
When visitor choose "Volvo" from the first dropdown menu and choose "White" from the second dropdown menu then hit submit button. He should jump to URL 1, and so on.
Can I do this?
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>
<option value="white">White</option>
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
</body>
<form target="_blank" action="/page_url" method="get">
<select name="carbrand">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel" selected="selected">Opel</option>
<option value="audi">Audi</option>
</select>
<select name="carcolor">
<option value="white">White</option>
<option value="black">Black</option>
<option value="red" selected="selected">Red</option>
<option value="blue">Blue</option>
</select>
<br/><br/>
<input type="submit" value="Submit">
</form>
You could use form and input tags.
As above example, after clicking on the button a new page will open (target="_blank" attribute opens the URL in a new window or tab).
In this case using the method="get" form attribute, the values of the dropdowns are passed as parameters in URI /page_url?carbrand=opel&carcolor=red. If instead the method="post" form attribute used, the values of the dropdowns aren't present in the URL.
You can put your drop downs into a form, that way when the form is submitted (with your submit button), you can then use the form values to determine what content to load.
Alternatively, if you want to do this without the server side logic, you replace your submit button with a simple <button type="button"...> and have the on click of that button handle the logic to open the page you want.
I think you should use this like this :
<option value="volvo"><a href='http://example.com'>Volvo</a></option>
</select>```
On my form, I'm trying to make the select box display the standard "select one" option so the user can click on it and pick among the 3 options I've made. I want this part of the form to be required while also not allowing the default option to go through. Any help in making the first option not work would be appreciated! Thank you!
<option selected="selected">Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
Just change
<select required>
<option value="" selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
Users can never submit the default option.
You could have the Select one option be both selected and disabled, like this.
function validate(self) {
console.log(self.value);
}
<select onchange="validate(this)" required>
<option disabled selected>Select one</option>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
The onchange event will trigger whenever a new value is chosen in the dropdown.
The selected tag makes sure its the default option.
The disabled tag makes sure it can't be chosen as an actual option.
The required tag prevents the form from submitting if the dropdown value is still its default.
The "select one" text should really not be an option, but instead a label
<label>Select One:</label>
<select>
<option value="air">On the air</option>
<option value="web">On the web</option>
<option value="both">Both</option>
</select>
<select name='main'>
<option value='For Sale'>For Sale</option>
<option value='Community'>Community</option>
</select>
<select name='sub'>
<option value='Animal'>Animal</option>
<option value='Fish'>Fish</option>
</select>
<select name='sub'>
<option value='Friend'>Friend</option>
<option value='Relitive'>Relitive</option>
</select>
<select name='sub2'>
<option value='Animal Thing'>Animal Thing</option>
<option value='Fish Thing'>Fish Thing</option>
</select>
<select name='sub'>
<option value='Best Friend'>Best Friend</option>
<option value='Relitive Home'>Relitive Home</option>
</select>
This is my html code and I want that when the user selects the main menu it will then show the sub menu and when the user selects the sub menu it will then show sub2 menu. I want to do this with Jquery, can someone help me with this?
I'm supposing that the sub and sub2 classes are disabled / hidden?
You want to check if the user has selected a value in the main.
You can find this in the Jquery documentation :selected Selector
So now you can see if you're main select was selected and then you can use this to enable to next select sub
If you want furthermore details on Selector, I think this question How to check if an option is selected? has some solid answers.
Cheers!
I'm trying to modify a select element with the 'multiple' attribute to only select/disselect the one option selected, instead of disselecting all options and selecting the one target.
Let's say we got this:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
What I want to happen when you select an option is:
<select name="somename[]" multiple="multiple">
<option selected="selected" value="val1">Val1</option>
<option value="val2">Val2</option> <!-- Disselected -->
<option value="val3">Val3</option>
</select>
Instead of:
<select name="somename[]" multiple="multiple">
<option value="val1">Val1</option>
<!-- All other values are disselected except the one option selected -->
<option selected="selected" value="val2">Val2</option>
<option value="val3">Val3</option>
</select>
I hope that made sense. If not please let me know.
I've tried using jQuery and hooking a click function on the select element, hoping to intersect the selected option but that failed. Appearently the selections are made before the event is triggered.
Thanks.