Scenario: I have 5 select boxes that hold the 5 weekdays and Instead of having the user click and choose a value for each one I want them to have the option of choosing the first box and have a button next to it that when clicked it auto fills the rest of the select boxes with the same value.
Is it as simple as setting the value of the select boxes equal the the value from the first box? Not sure how to tackle this. Would I also have different IDs and same names for the 5 select boxes or keep them different and apply the value to each option?
Give all the select boxes a class, eg <select class="syncday"> and then have your button's clickhandler do something like
$$("select.syncday").set("value", $$("select.selectday")[0].get("value"))
this takes the 'value' from the first select and applies it to all of them (using mootools' $$)
Related
I have a dropdown with 4 options. I want these options to be prepopulated depending on value that is selected from a different field. The different field is a "countries" field.
If country "A" or country "b" is selected, I want the dropdown to populate option 1.
If a different country, populate option 2.
Thanks in advance
You can try the following:
Find which event is fired when a user change the first dropdown value
Register a function to this event
In this function, detect what is the new input from the first dropdown. Check it, and change the value of the second dropdown depending on this check (How do I programmatically set the value of a select box element using JavaScript? could be useful for the implementation)
If you have issue trying to do it, do not hesitate to ask :)
I have two combo boxes in a form. The 1st combo box: type of position hiring while the 2nd combo box: location. The values of two combo boxes are dynamically populated from mysql
I need to change the value of 2nd combo box. If the value of 1st combo box change to "Linux Admin", the value of 2nd combo box should display the designated locations depends on the value of 1st combo box.
I found with the same function, but the values are manually populated Javascript - combobox change value of other combobox
I've solved this before. I did this in an MVC C# application, but the idea would still work here.
When you are building your HTML, create the name-value pairs for the combo boxes with the Name (in one of your stated cases) as being 'Linux Admin'. In the value for that, put all the locations in as a tab-delimited string.
In the javascript, when the first combo box changes, have the script read the values from the first combobox selector and split those values and put them in the next combo box as the names.
Here is a general idea that I used for a set of select boxes to allow for the selection of a Make, and then the next select box be populated with the available models.
<select>
<option value="Escape,Expedition,Explorer,F150,F350SD,Focus,Fusion,Mustang,T250 Vans">Ford</option>
<option value="Acadia,Envoy XL,Sierra 1500,Sierra 2500 Clsc,Terrain,Yukon">GMC</option>
</select>
I've been looking for a way to style select boxes based on their selected option. The data is coming in from Django so there are populated fields on load.
I've been using this javascript/jQuery solution with some success.
Style <select> element based on selected <option>
The basic idea is that the selected option value is moved to a class in the select box so you can style off that class.
What I've done here is duplicate the code into two sections. Once to run on load and another to run on change.
$('select').attr('class', '').addClass($('select').children(':selected').val());
$('select').on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});
This doesn't seem to work for multiple select boxes on load.
What happens is the on load code finds the first select box and then adds the class to all select boxes on the page, so basically it doesn't iterate over all select boxes and run one by one.
The second bit runs fine based on changing the select value.
Here is a fiddle http://jsfiddle.net/9sx6fos7/
As you can see both boxes take the class of the first on load.
Thank you!
in this scenario,
there are 4 radio button as 1,2,3,4,and we have select tag with option tag.
so requirement is onchange of radio button, number of option value of select tag should be displayed.
ex:if radio 1 is click, then select tag may have 10 values then first five values should be displayed.
if radio 2 is click,then select tag may have two values then all values should be displayed.
I think pic can explain more.
Please suggest, how to proceed
look at example
Figure 11–4 Example Select One Components
http://docs.oracle.com/cd/E19159-01/819-3669/bnase/index.html
our scenario,is between Genere and Language.
wen I click "Fiction" then, drop down should display only fiction related values and vice versa.fiction related values are list of array.
I'm wondering how I can use JavaScript to accomplish the following:
I have an input area with five dropdownlists, and each one has a corresponding radio button. When a dropdownlist is clicked to make a selection, I would like the radio button paired with it to become checked right then. Any help would be appreciated.
Its kind of simple really. Here is a small code for you.
ID the 5 listboxes as "sel1", "sel2" ,...
ID the 5 radio buttons "rad1", rad2,.. Make sure the radio buttons have same name though!
Next, put this function in as a javascrip:
function makeSelection(radioid){
document.getElementById(radioid).checked=true;
}
In the select boxes, attach onchanged listeners:
ie;
<select ... onchange="makeSelection('rad1');" >.. for the 1st select box,
<select ... onchange="makeSelection('rad2');" >.. for the 2ns select box, etc.