CODEWITHSUNDEEP
javascript
AlexGM
AlexGM

Reputation: 168

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

I have a problem with a function that populates a select list (desired action,) that is also changing a second select list (undesired action.)

It requires a rather long explanation so I'm including the code for the page to illustrate the problem.

The two lists are identical. The lists are populated depending on if one chooses a Man's or a Woman's bike. All works well if one chooses one of each gender, the problem arises when two of the same gender are chosen. Then the content of the other select list is emptied. (???)

Any help would be appreciated.

Sorry, I have not been here for a while. I've simplified the code to just the one offending function and put the code in jsfiddle, here is the link:

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

This is a very old site that I'm just trying to maintain.

Thank you.

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

Upvotes: 1

Views: 50

Answers (1)

Starson Hochschild
Starson Hochschild

Reputation: 754

The problem lies here:

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

This is in effect moving the option nodes from one select to the other. You simply need to clone the original nodes:

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

See the updated jsfiddle here:

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

Upvotes: 1

Related Questions