Question

I have the following dropdown that works fine with my jquery on the first panel its produced but the same panel can be produced more than one times and subsequent pages the jQuery doesn’t work for showing the other box.

e.g. and you will see in the code panel22_0 …panel22_1 etc..

I’m puzzled now. Any help much appreciated.

panel22_

<xsl:for-each select="bankguarantees/bankguaranteedata">
    <div id="panel22" class="panels">
    <xsl:attribute name="id">panel22_<xsl:value-of select="@id"/></xsl:attribute>
  <table border="1" width="100%" height="100%"  bgcolor="#CECFFF" style="border-top: none" cellspacing="10">    
<tr>
<td>
<table border="0" width="100%" height="100%" bgcolor="lightyellow" class="inline">
<tr>
<td colspan="3" class="Header" height="1"></td>
</tr>
   <tr name="contliab" id="contliab">
        <script type="text/javascript">
         $('#producttypes').change(function()
         {
           if($('#otherprodtype').is(':selected'))
           {
           $('#otherprodtypebox').show();
           }
         else
          {
           if($('#otherprodtypebox').is(':visible'))
           {
             $('#otherprodtypebox').hide();
           }
          }
         });;
        </script>
        <td class="Label">Product Type</td>
        <td class="field">
         <select name="producttypes" id="producttypes">
          <option value="interventionguar">
           <xsl:if test="producttypes/option[@id='interventionguar']='selected'">
            <xsl:attribute name="selected"/>
           </xsl:if>Intervention Guarantee</option>
          <option value="customsguar">
           <xsl:if test="producttypes/option[@id='customsguar']='selected'">
            <xsl:attribute name="selected"/>
          </xsl:if>Customs Guarantee</option>
          <option value="otherprodtype" id="otherprodtype">
           <xsl:if test="producttypes/option[@id='otherprodtype']='selected'">
            <xsl:attribute name="selected"/>
           </xsl:if>Other</option>
         </select>
         <input class="amdInputText" type="text" id="otherprodtypebox" value="" style="display:none;">
            <xsl:attribute name="value"><xsl:value-of select="otherprodtypebox"></xsl:value-of></xsl:attribute></input>
        </td>
       </tr>

Answer 1

You should use every ID only once in html.
Use class instead:

$('.producttypes').change(function()
     {
       $this = $(this);
       if($this.children('.otherprodtype').is(':selected'))
       {
       $this.sliblings('.otherprodtypebox').show();
       }
     else
      {
       if($this.sliblings('.otherprodtypebox').is(':visible'))
       {
         $this.sliblings('.otherprodtypebox').hide();
       }
      }
     });;

Of course you need to add producttypes class to elements with id producttypes, otherprodtype class to elements with id otherprodtype etc. Than You could throw away ID’s so they dont repeat.