Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is the code:</p> <p>I simulated your situation like this:</p> <pre><code>&lt;table id="interest_rate"&gt; &lt;tr&gt; &lt;td&gt; &lt;select class="dropDown" style="width:150px" name="rate_value_1"&gt; &lt;option value="rate_value_1"&gt;rate_value_1&lt;/option&gt; &lt;option value="Floating Rate"&gt;Floating Rate&lt;/option&gt; &lt;option value="Fixed Rate"&gt;Fixed Rate&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="button" value="equal" class="equal" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;select class="dropDown" style="width:150px" name="rate_value_2"&gt; &lt;option value="rate_value_2"&gt;rate_value_2&lt;/option&gt; &lt;option value="Floating Rate"&gt;Floating Rate&lt;/option&gt; &lt;option value="Fixed Rate"&gt;Fixed Rate&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;td&gt;&lt;input type="button" value="equal" class="equal" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>And here is the javascript code that are going to work in that situation, you just need to put this code after the table.</p> <pre><code>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 &amp;&amp; '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 &lt; selectsLength; ++i) { selects[i].selectedIndex = defaultValue; } } }; </code></pre> <p><a href="http://jsfiddle.net/hVuj6/" rel="nofollow">Live jsFiddle Demo</a></p> <hr> <p><strong>EDIT1</strong></p> <p>To change only the <code>SELECT</code> elements below the row, you need to identify the index of the current <code>SELECT</code> element and then change all below. Here is the code:</p> <pre><code>document.getElementById('interest_rate').onclick = function (e) { if (!e) { e = event; } var target = e.target || e.srcElement; if ('equal' == target.className &amp;&amp; '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 &lt; selectsLength; ++i) { if (status || selects[i] === targetSelect) { status = 1; selects[i].selectedIndex = defaultValue; } } } } }; </code></pre> <p><a href="http://jsfiddle.net/hVuj6/1/" rel="nofollow">Live jsFiddle Demo</a></p> <hr> <p><strong>EDIT2</strong></p> <p>To change the value of <code>INPUT</code> elements with <code>type="text"</code>, you just need to change <code>selectedIndex</code> to <code>value</code> and then check the type of <code>INPUT</code> element like this:</p> <pre><code>document.getElementById('interest_rate').onclick = function (e) { if (!e) { e = event; } var target = e.target || e.srcElement; if ('equal' == target.className &amp;&amp; 'button' == target.type) { var targetInput = target.parentNode.parentNode.getElementsByTagName('INPUT')[0]; if (targetInput &amp;&amp; 'text' == targetInput.type) { var defaultValue = targetInput.value; for (var i = 0, inputs = this.getElementsByTagName('INPUT'), inputsLength = inputs.length, status = 0; i &lt; inputsLength; ++i) { if (status || inputs[i] === targetInput) { status = 1; if ('text' == inputs[i].type) { inputs[i].value = defaultValue; } } } } } }; </code></pre> <p><a href="http://jsfiddle.net/hVuj6/2/" rel="nofollow">Live jsFiddle Demo</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload