1

私はphpを使用してフォームを作成しています。私のフィールドの1つは、同じ2つのオプション「変動金利」と「固定金利」を選択して6行のドロップダウンボックスを作成し、各ドロップダウンボックスの横にボタンも作成しました。ユーザーが選択しやすくしたい。たとえば、ユーザーが最初の行で[変動金利]を選択し、横にあるボタンをクリックすると、残りの行の選択が[変動金利]に変更されます。また、ユーザーが4行目でいずれかのオプションを選択すると、ユーザーが4行目で選択したオプションに応じて5行目と6行目が変わります。私はJavaまたはJqueryの初心者です。Javascriptを使用して上記の結果を達成する方法はありますか？

1列目：

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

2列目：

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

1 に答える 1

0

コードは次のとおりです。

私はあなたの状況を次のようにシミュレートしました：

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

ライブjsFiddleデモ

編集1

行の下の要素のみを変更する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;
        }
      }
    }
  }
};

ライブjsFiddleデモ

EDIT2

INPUTで要素の値を変更するには、に変更してから、次のように要素のタイプを確認するtype="text"必要があります。selectedIndexvalueINPUT

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

ライブjsFiddleデモ

于 2012-06-12T02:30:43.467 に答える