Javascript onclick将第二个输入框的值更改为与第一个输入框的值相同

Question

I am creating a form using php. One of my field I created a six rows of drop down box with the same two option 'Floating Rate' and 'Fixed Rate' to select and also a button at the side of each drop down box. I want to make it easier for the user to select. For example if the user select 'Floating Rate' on the first row and click on the button at the side, the rest of the rows will change its selection to 'Floating Rate'. And if the user select either options on the 4th row, the 5th and the 6th row will change according to the option the user choose on the 4th row. I'm a noobie to Java or Jquery. Is there a way to achieve the above result using Javascript?

1st Row:

<td>
    <select class="dropDown" style="width:150px" name="rate_value_1">
    <option value="<?php echo $_SESSION['rate_value_1'] ;?>"><?php echo $_SESSION['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>

2nd Row:

<td>
    <select class="dropDown" style="width:150px" name="rate_value_2">
    <option value="<?php echo $_SESSION['rate_value_2'] ;?>"><?php echo $_SESSION['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>

Answer 1

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