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.
Related
I have a page where rows can be added which include drop downs (select) fields. each one of those fields is dynamically created with an id of "drop1, drop2, drop3" etc.
I'm wanting to achieve pulling some data from mysql with ajax, problem i'm having is knowing which drop down has changed to pull the data.
ive used this to know how many select fields there are currently, but don't know how to decide which one has changed. any help is appreciated.
var myCount = $("select[id^=drop]").length;
here is the row that gets added.
var n=($('.detail tr').length-0)+1;
var tr = '<tr>'+
'<td>'+n+'</td>'+
'<td><select id="drop'+n+'" name="prodService[]"></select></td>'+
'<td id="desc'+n+'"></td>'+
'<td>Delete</td>'+
'</tr>';
The whole idea around the select input it's like any input accepts all events. Any input takes click, change, input...etc let's say we have 3 select dropdown.
How to detect if any of them has changed and get the new value
$('.select-list').on('change', function(evt) {
console.log($(this).val()); // get the select value - new value if changed
console.log($(this).attr('id')); // just for implementation purposes and debugging
});
Going further you can implement something like: When the user selects an item from a dropdown, send a request to a server to get some data. You can do that with the value="" attribute, put keyword/key-trigger (just to differentiate between them) to send different request depending on what item has been selected.
$('.select-list').on('change', function(evt) {
console.log($(this).val()); // get the select value - new value if changed
console.log($(this).attr('id')); // just for implementation purposes and debugging
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select-list" name="items" id="itemsList1">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
<select class="select-list" name="items" id="itemsList2">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
<select class="select-list" name="items" id="itemsList3">
<option value="1">item1</option>
<option value="2">item2</option>
<option value="3">item3</option>
<option value="4">item4</option>
</select>
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 am manipulating a select, which before I show is got more than one selected option. After my code just one stays selected, but because I removed the previous selected the select is showing the default instead of the next selected.
<body>
<select id="test">
<option value="1">1 month</option>
<option value="2" selected="selected">2 month</option>
<option value="3" selected="selected">3 month</option>
</select>
</body>
And javascript
$('#test option[value=3]').remove();
Example here: example
Is this expected? In the console the option 2 in the example will still have the selected attribute.
It seems its the default behavior. When you mark multiple with selected it will make the last one in the list the selected one. After removing the selected item, it will select the first one all the time. No matter if any other items have selected attribute or not.
Tested in chrome(38.0.2125.104 m), firefox 31 and ie10. Same behavior everywhere.
Also note that select will pic kthe latest option with select attribute containing whatever.
In case you have:
<select id="test">
<option value="1">1 month</option>
<option value="2" selected="selected">2 month</option>
<option value="3" selected="false">3 month</option>
</select>
Last one will be picked still. Its same for 0, empty string or whatever you put there.
Here a fiddle with test and a workaround :
http://jsfiddle.net/s8j7t2g5/9/
The attr of the option is still selected but the val of the select is wrong.
$("#test option").each(function () {
if($(this).attr("selected") == "selected")
{
$('#test').val($(this).val());
}
});
I am trying to swap all the options between two Harvest Chosen select boxes. The scenario is I want to record details of a phone call. The call can either be inbound or outbound. If the call is outbound the I populate a select box (caller) with a list of possible values of those users that can make outbound calls and a second box (callee) with a list of possible values of those users they can make calls to. If the user updates the call type to be inbound then I want to swap the select boxes around so that the callee's are in the caller box and vice versa.
I very nearly have this working except each time I change the call type it keeps appending the values onto the end of the select options in each respective caller/callee select rather than completely clearing them and replacing all values.
Would appreciate some help as to why this is happening.
See http://jsfiddle.net/RyHFK
HTML
<label for="call_type">Call Type:</label>
<select name="call_type" id="call_type" class="chosen">
<option value="OUTGOING">Outgoing</option>
<option value="INCOMING">Incoming</option>
</select>
<label for="caller">Caller:</label>
<select name="caller" id="caller" class="caller chosen">
<option value="Caller 1">Caller 1</option>
<option value="Caller 2">Caller 2</option>
<option value="Caller 3">Caller 3</option>
<option value="OTHER">Other</option>
</select>
<label for="caller">Callee:</label>
<select name="callee" id="callee" class="callee chosen">
<option value="Callee 1">Callee 1</option>
<option value="Callee 2">Callee 2</option>
<option value="Callee 3">Callee 3</option>
<option value="OTHER">Other</option>
</select>
The way it's written, you are appending to the same arrays every time there is a change. Move your calleeOptions and callerOptions variables inside your change handler:
// on call type change
$('#call_type').change(function(){
var callerOptions = [];
var calleeOptions = [];
Here's a jsFiddle.
I have a primary drop down list that has three values:
1 - select
2 - Fail
3 - pass
the page is populated from the database, so here you could have anything from 1 to 50 dropdown to set the status of each record as fail or pass.
I would like to select 'fail' from the primary dropdown, any dropdown's that are populated from database should set to the selection i have made as being 'fail'
hope someone can help.
thank you
Yas
You can do this using javascript or jquery.
OnChange of first dropdown, select all dropdown values accordingly.
EDIT:
For your reference, I have prepared an example. Refer LIVE DEMO
HTML:
<select class="dDown">
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select>
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select>
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
JS:
$('.dDown').on("change", function() {
$('select').not('.dDown').val(this.value);
});