Here is the code:
I simulated your situation like this:
<table id="interest_rate">
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_1">
<option value="rate_value_1">rate_value_1</option>
<option value="Floating Rate">Floating Rate</option>
<option value="Fixed Rate">Fixed Rate</option>
</select>
</td>
<td><input type="button" value="equal" class="equal" /></td>
</tr>
<tr>
<td>
<select class="dropDown" style="width:150px" name="rate_value_2">
<option value="rate_value_2">rate_value_2</option>
<option value="Floating Rate">Floating Rate</option>
<option value="Fixed Rate">Fixed Rate</option>
</select>
</td>
<td><input type="button" value="equal" class="equal" /></td>
</tr>
</table>
And here is the javascript code that are going to work in that situation, you just need to put this code after the table.
document.getElementById('interest_rate').onclick = function (e) {
if (!e) {
e = event;
}
// Get the clicked target
var target = e.target || e.srcElement;
// If this is the target that we want to get.
if ('equal' == target.className && 'button' == target.type) {
// Get the selected index of the 'SELECT' element.
var defaultValue = target.parentNode.parentNode.getElementsByTagName('SELECT')[0].selectedIndex;
// Loop and change all 'SELECT' element to the same selected index.
for (var i = 0, selects = this.getElementsByTagName('SELECT'), selectsLength = selects.length; i < selectsLength; ++i) {
selects[i].selectedIndex = defaultValue;
}
}
};
Live jsFiddle Demo
EDIT1
To change only the SELECT
elements below the row, you need to identify the index of the current SELECT
element and then change all below. Here is the code:
document.getElementById('interest_rate').onclick = function (e) {
if (!e) {
e = event;
}
var target = e.target || e.srcElement;
if ('equal' == target.className && 'button' == target.type) {
var targetSelect = target.parentNode.parentNode.getElementsByTagName('SELECT')[0];
if (targetSelect) {
var defaultValue = targetSelect.selectedIndex;
for (var i = 0, selects = this.getElementsByTagName('SELECT'), selectsLength = selects.length, status = 0; i < selectsLength; ++i) {
if (status || selects[i] === targetSelect) {
status = 1;
selects[i].selectedIndex = defaultValue;
}
}
}
}
};
Live jsFiddle Demo
EDIT2
To change the value of INPUT
elements with type="text"
, you just need to change selectedIndex
to value
and then check the type of INPUT
element like this:
document.getElementById('interest_rate').onclick = function (e) {
if (!e) {
e = event;
}
var target = e.target || e.srcElement;
if ('equal' == target.className && 'button' == target.type) {
var targetInput = target.parentNode.parentNode.getElementsByTagName('INPUT')[0];
if (targetInput && 'text' == targetInput.type) {
var defaultValue = targetInput.value;
for (var i = 0, inputs = this.getElementsByTagName('INPUT'), inputsLength = inputs.length, status = 0; i < inputsLength; ++i) {
if (status || inputs[i] === targetInput) {
status = 1;
if ('text' == inputs[i].type) {
inputs[i].value = defaultValue;
}
}
}
}
}
};
Live jsFiddle Demo