Was hoping you guys can help me out. I can't seem to figure out how to make a bookmarklet to selecting options on a drop-down menu on a webpage.
Hoping to achieve: make a bookmark on my chrome browser. When I click it on this page it will select the drop-down and select level 2 in the membership box
html of the webpage
<select name="membership" onchange="submit()">
<option value="1"> Level 1</option>
<option value="2"> Level 2</option>
<option value="3"> Level 3</option>
thanks. Really new to this.
Edit: Sorry I apologize. This is the current bookmark I tried to make
javascript:document.getElementById("membership").selectedIndex = 2; <
EDIT2 < realized probably can't use get element by id since the <select name="membership" is using name instead of id. Is there one that can search the name=?
EDIT 3 THANKS EVERYONE for your help here you guys are amazing and I've learned a lot in the past 2 hrs with the different types of getElements* and queryselector. thanks sideroxylon!
This might get you started. First up you select the option you want. Then trigger the onchange event. Make sure you're passing the selected value.
document.getElementsByName('membership')[0].value = 2;
document.getElementsByName('membership')[0].onchange();
function submit(val) {
alert(val);
}
<select name="membership" onchange="submit(this.value)">
<option value="1">Level 1</option>
<option value="2">Level 2</option>
<option value="3">Level 3</option>
</select>
Your bookmarklet should look something like this:
javascript:document.getElementsByName('membership')[0].value = 2;document.getElementsByName('membership')[0].onchange();
Related
I have a "master dropdown menu" that contains four options (English, Spanish, Russian, Other) as the question asks their primary language.
Below this master dropdown menu contains other questions that asks similar questions and contain the same options (English, Spanish, Russian, Other).
I am wondering if it's possible to have the other dropdown menu options have the same value selected based on the 'master dropdown menu' option. So if John Smith chooses English in the master dropdown menu, the other questions will automatically have English selected in the other dropdown menus, while also allowing John to change an Answer - he may choose Spanish for question 3. I'm hoping the solution uses JavaScript or jQuery, as PHP won't be an option.
<label>What is your primary language?</label>
<select name="question1">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
<label>Language your spouse speaks?</label>
<select name="question2">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
<label>Language your children speak?</label>
<select name="question3">
<option></option>
<option value="english">English</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
<option value="other">Other</option>
</select>
When selecting the value in the master dropdown menu you can set the value to the other dropdowns via JavaScript.
document.querySelector('select[name="question1"]').addEventListener('change', function(event) {
document.querySelector('select[name="question2"]').value = event.target.value;
document.querySelector('select[name="question3"]').value = event.target.value;
});
really simple solution but should work
JSFiddle
You can do this in jQuery as follows, using nextAll() to populate the other select items:
$('select').on('change', function() {
$(this).nextAll('select').val($(this).val());
});
(Note that you probably want to add a class to your selects as the above will operate on ALL select elements on the page).
Below you are adding an EventListener to to trigger when the first item is changed and assigning its value to rest of the selectors. Please update var firstDD and reminingDD valriables based on your requirement. Or better use specific IDs for each seletor so that it would be easy to understand.
$( document ).ready(function() {
var firstDD = $("select:first-child");
var reminingDD = $("select:not(:first-child)");
console.log(reminingDD);
firstDD.change(function () {
$(reminingDD).val($(firstDD).val());
});
});
I want edit text with a drop down box along with custom scrollbar so end user can add data explicitly or can add from drop down box. The final entered value by end user should be saved.I want this in UI development preferably angular js.
Well from what i understood , you need a text input as well as a dropdown input together.
To be frank , this is quite easy and i dont understand what caught you up in this.
So here is the code:
<input type="text"/>
<select style="width:20px;">
<option value=""></option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
Check out the jsfiddle here:
https://jsfiddle.net/kna3fj5t/
I have a long list (of an undetermined length, that can keep on growing) of values. For example:
<select>
<option value="1">1, some test</option>
<option value="2">2, some text</option>
<option value="3">3, some text</option>
<option value="4">4, some text</option>
<option ...... add 100 more options> ..
</select>
What would be the best practice/user friendly way to support such a long list? I imagine that a user might find it frustrating to scroll through a super long list.
I am trying to minimize the user's scroll time, by presenting the most recent values at the top of the drop down, but if she/he would like to go to the first element in the drop down it would require a lot of scrolling.
Thanks
Instead of using <select>, how about changing it to HTML5 <datalist>, which is like this:
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
By the way, you can type the first letter using the <select>, so my suggestion will be sort your data according to the first letter. Because it will help the user to go to the sub-option directly.
Maybe add a searchfield to the dropdown?
Something like this: http://jsearchdropdown.sourceforge.net/
What kind of data would you like to display ? Maybe there is another way than select to display them ? In fact, for dozens of items, select is not the best choice, unless you use by example a JQuery plugin like jsearchdropdown and in this case the user must know what he's looking for.
UPDATE: I was trying lots of different methods for doing this and none of them worked... until... I changed my dropdown menu name from (date-range) to (dateRange) removing the (-), sorry for wasting time!
I have a search form and a custom reset form button, which resets all the values in the form. I now have a dropdown menu and when the reset button is pressed, I want the first option to be selected.
This is my form:
<select name="date-range" id="date-range">
<option value="Any">Any date</option>
<option value="Today">Today</option>
<option value="Yesterday">Yesterday</option>
<option value="1 Week">Within 1 Week</option>
<option value="1 Month">Within 1 Month</option>
<option value="3 Months">Within 3 Months</option>
<option value="6 Months">Within 6 Months</option>
<option value="1 Year">Within 1 Year</option>
</script>
... and this is my javascript function that now needs to select the first dropdown value "Any".
function resetSearchForm()
{
document.searchFrm.searchStr.value='';
document.searchFrm.vertical.checked = true;
document.searchFrm.horizontal.checked = true;
** dropdown select first **
}
What is the proper way to do this? Any help gratefully received :)
This will work:
document.getElementById('date-range').selectedIndex = 0;
Example can be found here:
http://jsfiddle.net/yPmmG/3/
No javascript required, just add the selected attribute to the first option. That's what the attribute is for.
<option selected value="Any">Any date</option>
It is recommended that all select elements have one option with the selected attribute, that way there is always one selected by default. It will be the selected option when the page first loads and if the form is reset.
Here is the issue.
I have a select dropdown list.
<select name="listingtype" id="speedD" style="width:210px;">
<option>For Sale</option>
<option>For Rent</option>
</select>
And another select drop down list where the prices appear , which on page load it is empty..
So if user clicks For Sale: then the other select drop down list, loads price list like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
<option value="250000">$250,000</option>
And if they choose For Rent. Select drop down is propagated like so:
<select name="valueA" id="speedF" style="width:200px;">
<option value="Any" selected="selected">Any</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
</select>
I need this code to be client side, no need for server side. And just wanted to know what the cleanest method for doing this is.
Cheers.
First of all I recommend setting the value attribute in your option elements.
Example:
<option value="sale">For sale</option>
<option value="rent">For rent</option>
If you have not already heard of or seen the JavaScript library known as jQuery I strongly recommend checking it out! It can be very helpful when creating a dynamic site like this using minimal JavaScript.
I would do something like the following:
<html>
...
<body>
<div id="fillme"></div>
<script type="text/javascript">
if (document.yourformname.listingtype.value == "sale") {
//it is for sale
$('#fillme').html('<select name="valueA" id="speedF" style="width:200px;"><option value="Any" selected="selected">Any</option><option value="50000">$50,000</option><option value="100000">$100,000</option><option value="150000">$150,000</option><option value="200000">$200,000</option><option value="250000">$250,000</option></select>');
} else {
//fill it with the other elements
}
</script>
</body>
</html>
Now of course you could load it more dynamically with JSON or XML but that is up to you. I really recommend checking out the library:
http://jQuery.com
Use JavaScript to fill the empty select with options when the user selects an option (either onchange or onselect, forget which) in the For Sale/For Rent select.
EDIT: More specifically, have that second box be empty when the page loads. Store the options in arrays. Use a loop to create new OPTION elements based on each array item.