0

I have multiple dropdowns where people can select opening times for a store and I need to make it easy for people to enter the value in the first dropdown and then click to copy across all days;

Basically an onclick; Copy selected value in monfrom and monto and assign values to other dropdowns.

<select name="monfrom" id="monfrom">
<option value="00:30">00:30</option>
    <option value="01:30">01:30</option>
    <option value="02:30">02:30</option>
</select>
<select name="monto" id="monto">
 <option value="00:30">00:30</option>
    <option value="01:30">01:30</option>
    <option value="02:30">02:30</option>                     
</select>

<a href='#' onclick='JavascriptCode()'>Apply to all</a>

I hope someone can help.

Kieran Headley
  • 933
  • 1
  • 12
  • 21

1 Answers1

0

You can use this, using plain javascript:

Javascript 

function applyAll() {
    var monfrom = document.querySelectorAll('select[name$="from"]');
    var monto = document.querySelectorAll('select[name$="to"]');
    for (i = 0; i < monfrom.length; i++) {
        monfrom[i].value = monfrom[0].value;
    };
    for (i = 0; i < monto.length; i++) {
        monto[i].value = monto[0].value;
    };
};
window.onload = function () {
    var apply = document.getElementById('apply');
    apply.addEventListener('click', applyAll);
};

HTML

<select name="monfrom" id="monfrom">
    <option value="00:30">00:30</option>
    <option value="01:30">01:30</option>
    <option value="02:30">02:30</option>
</select>
<select name="monto" id="monto">
    <option value="00:30">00:30</option>
    <option value="01:30">01:30</option>
    <option value="02:30">02:30</option>
</select>
<button type="button" id="apply">Apply to all</button>

Demo

Since you seem to have jQuery, you can use this (although it's not faster):

function applyAll() {
    var monfrom = $('select[name$="from"]');
    var monto = $('select[name$="to"]');
    monfrom.val(monfrom[0].value);
    monto.val(monto[0].value);
};
$(function () {
    $('#apply').on('click', applyAll);
});
Sergio
  • 28,539
  • 11
  • 85
  • 132
  • Thanks for the solution this has not worked, onpage load stops the page from loading, if I change to onclick I get the following error "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." – Kieran Headley Dec 07 '13 at 23:31
  • @KieranHeadley, that error is not a error, its a warning for other code you have and its not related to this. Is my DEMO the behaviour you are looking for? – Sergio Dec 07 '13 at 23:32
  • @KieranHeadley, did you add/change the HTML to a button like I did? Otherwise that element will not be found... – Sergio Dec 07 '13 at 23:33
  • @KieranHeadley, about that error you mentioned, read here, it's jQuery related and my first answer is plain javascript: http://stackoverflow.com/questions/20045162/jquery-error-event-returnvalue-is-deprecated-please-use-the-standard-event-pre – Sergio Dec 07 '13 at 23:40
  • Thanks I have tried the adapted JQuery code and this still has not worked?? – Kieran Headley Dec 07 '13 at 23:53
  • @KieranHeadley, do you have a live link? – Sergio Dec 08 '13 at 07:11