如何停止對選擇列表的更改影響第二選擇

Question

我在填充選擇列表（所需操作）的功能上也遇到了問題，該功能還更改了第二個選擇列表（不需要的操作）。

它需要一個相當長的解釋，所以我包括了用於說明問題的頁面代碼。

這兩個列表是相同的。 根據是否選擇男人或女人的自行車來填充列表。 如果每個人都選擇一種性別，那么一切都會很好地工作，當選擇兩種相同性別的人時，就會出現問題。 然后，另一個選擇列表的內容將被清空。 （???）

任何幫助，將不勝感激。

抱歉，我有一段時間沒來了。 我已將代碼簡化為僅一個令人討厭的函數，並將代碼放入jsfiddle中，這是鏈接：

http://jsfiddle.net/AlexGM/p5ctb1td/

這是一個非常舊的網站，我正試圖維護。

謝謝。

<body>
<script language="javascript">
// Dynamically Generated Content
    BikeOptions = new Array();
FemaleOpt1 = new Option('12" Model', '7')
BikeOptions[7] = new Array()
BikeOptions[7][1] = new Array()
BikeOptions[7][1][0] = 'LRD12ST'
BikeOptions[7][1][1] = '$399.80 + s/h'
FemaleOpt2 = new Option('15" Model', '8')
BikeOptions[8] = new Array()
BikeOptions[8][1] = new Array()
BikeOptions[8][1][0] = 'LRD15ST'
BikeOptions[8][1][1] = '$399.80 + s/h'
FemaleOpt3 = new Option('17" Model', '9')
BikeOptions[9] = new Array()
BikeOptions[9][1] = new Array()
BikeOptions[9][1][0] = 'LRD17'
BikeOptions[9][1][1] = '$399.80 + s/h'
MaleOpt1 = new Option('14" Model', '2')
BikeOptions[2] = new Array()
BikeOptions[2][1] = new Array()
BikeOptions[2][1][0] = 'LRD14'
BikeOptions[2][1][1] = '$399.80 + s/h'
MaleOpt2 = new Option('17" Model', '3')
BikeOptions[3] = new Array()
BikeOptions[3][1] = new Array()
BikeOptions[3][1][0] = 'LRD17'
BikeOptions[3][1][1] = '$399.80 + s/h'
MaleOpt3 = new Option('19.5" Model', '4')
BikeOptions[4] = new Array()
BikeOptions[4][1] = new Array()
BikeOptions[4][1][0] = 'LRD19'
BikeOptions[4][1][1] = '$399.80 + s/h'
MaleOpt4 = new Option('22" Model', '5')
BikeOptions[5] = new Array()
BikeOptions[5][1] = new Array()
BikeOptions[5][1][0] = 'LRD22'
BikeOptions[5][1][1] = '$399.80 + s/h'
MaleCTR = 5
FemaleCTR = 4
BothCTR = 1

// End Dynamically Generated Content

function updateSizes(model, count) {
    newOpt = new Option("Select Your Bike Size", "")
    if (count == 1) {
        SelectList = "ModelHeight";
    } else {
        SelectList = "FrModelHeight";
    }
    document.getElementById(SelectList).length = 0; // clear the list
    document.getElementById(SelectList).options[0] = newOpt;
    if ( model == 'M' ) {
        for ( x = 1; x < MaleCTR; x++ ) {
            mOpt = "MaleOpt"+x;
            document.getElementById(SelectList).options[x] = window[mOpt];
        }
    } else if ( model == 'F' ) {
        for ( x = 1; x < FemaleCTR; x++ ) {
            fOpt = "FemaleOpt"+x;
            document.getElementById(SelectList).options[x] = window[fOpt];
        }
    } 
    document.getElementById(SelectList).selectedIndex = 0;
}

</script>

  <p class="style1">TEST PAGE</p>
  <form name="myForm" action="" method="post" onsubmit="">

  <table width="475" border="0" cellpadding="0" cellspacing="0">

    <tr>
      <td>1</td>
      <td><p>FIRST BIKE: Click if you want a Men's or Women's model.</p></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>
        <input name="ModelSex" type="radio" value="M" onclick="updateSizes('M', 1)" />Men's<input name="ModelSex" type="radio" value="F" onclick="updateSizes('F', 1)" />Women's
      </td>
    </tr>
    <tr>
      <td>2</td>
      <td>Choose the bike size that's right for you.</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>
        <select id="ModelHeight" name="ModelHeight">
          <option value="">Select Your Bike Size</option>
          <option value="">-- Please select the model type first --</option>
        </select>
      </td>
        <input type="hidden" id="PaymentPlan" name="PaymentPlan" value="" />
    </tr>

      <td>3 </td>
      <td><p>SECOND BIKE: Choose a Men's or Women's model.</p></td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>
        <input name="FrModelSex" type="radio" value="M" onclick="updateSizes('M', 2)" />
        Men's
        <input name="FrModelSex" type="radio" value="F" onclick="updateSizes('F', 2)" />
        Women's
      </td>
    </tr>
    <tr>
      <td>4</td>
      <td>Choose the size for the 2nd bike.</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>
        <select id="FrModelHeight" name="FrModelHeight">
          <option value="">Select Your Bike Size</option>
          <option value="">-- Please select the model type first --</option>
        </select>
      </td>
      <input type="hidden" id="FrPaymentPlan" name="FrPaymentPlan" value="" />
    </tr>    

    <tr>
      <td>5</td>
      <td>Here you would submit the form</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>Thank you.</td>
    </tr>
  </table>
  </form>
</body>

Answer 1

問題出在這里：

document.getElementById(SelectList).options[x] = window[mOpt];
...
document.getElementById(SelectList).options[x] = window[fOpt];

這實際上是將選項節點從一個選擇移動到另一個。 您只需要克隆原始節點：

document.getElementById(SelectList).options[x] = window[mOpt].cloneNode(true);
...
document.getElementById(SelectList).options[x] = window[fOpt].cloneNode(true);

在這里查看更新的jsfiddle：

http://jsfiddle.net/p5ctb1td/3/

如何停止對選擇列表的更改影響第二選擇

問題描述

1 個解決方案

解決方案1
1 已采納 2014-08-22 18:56:35

如何停止對選擇列表的更改影響第二選擇

問題描述

1 個解決方案

解決方案1 1 已采納 2014-08-22 18:56:35

解決方案1
1 已采納 2014-08-22 18:56:35