Javascript onclick將第二個輸入框的值更改爲與第一個輸入框的值相同

Question

我正在使用php創建表單。我的一個領域是創建了六行下拉框，其中有兩個選項「浮動匯率」和「固定匯率」可供選擇，每個下拉框旁邊還有一個按鈕。我想讓用戶更容易選擇。例如，如果用戶在第一行選擇「浮動比率」並單擊側邊的按鈕，其餘行將將其選擇更改爲「浮動比率」。如果用戶在第4行選擇任一選項，則第5行和第6行將根據用戶在第4行選擇的選項而改變。我是Java或Jquery的noobie。有沒有辦法使用Javascript來實現上述結果？

第一行：

<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> 

第二行：

<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

下面是代碼：

我模擬您的情況是這樣的：

<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> 

這裏是這是JavaScript代碼在這種情況下工作，你只需要把這個代碼放在表格後面。

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

只改變行下面的SELECT元素，你需要確定當前SELECT元素的索引，然後在下面的所有改變。下面是代碼：

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

要與type="text"改變INPUT元素的值，你只需要改變selectedIndex到value，然後檢查類型INPUT這樣的元素：

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