如何阻止对选择列表的更改影响第二个选择

How to stop changes to a select list from affecting a second select

本文关键字：选择 影响 第二个 列表 何阻止      更新时间：2023-09-26

我有一个问题，这个函数填充一个选择列表(期望的操作)，它也改变了第二个选择列表(不希望的操作)

这需要很长的解释，所以我附上了这个页面的代码来说明这个问题。

两个列表是相同的。列表的填充取决于你选择的是男士还是女士的自行车。如果一个人在每个性别中选择一个，一切都很好，但如果选择两个相同性别的人，问题就出现了。然后清空另一个选择列表的内容。(? ?)

如有任何帮助，不胜感激。

对不起，我有一段时间没来。我已经简化了代码，只剩下一个有问题的函数，并把代码放在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>

问题在这里:

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/

相关文章：