开发者

Javascript sticky dependant dropdown

I asked a question regarding this problem about a few hours back and have noticed that this still isn't working correctly.

What I need is to show a textbox to the user if they select a two of the three choices. When the user clicks the submit button the dropdown needs to maintain the value chosen. I can do this with my application code but where the javascript fails is that the hidden div, even though it has a value that is dependent on the textbox being shown, will no longer show. It's because of the pager refresh.

Here is my code. Can someone please tell me what I need to change so that the textbox will reappear after a refresh IF a value other than "NONE" is selected?

function toggleTbox(chosen)
{
    var hide = document.getElementById("otherValues");
    if (chosen == 'PHASE1') {
        hide.style.display = 'block';
    } else if(chosen == 'PHASE2') {
        hide.style.display = 'block';
    } else {
        hide.style.display = 'none';
    }
}

<tr>
  <td>
    <label for="sales">Sales:</label><br />
    <select name="sales" onchange="toggleTbox( document.salesEntry.salesEntry.options[ document.salesEntry.rxGateway.selectedIndex ].value );">
    <option value="[server]">[server]</option>
    <option value="NONE">NONE</option>
    <option value="PHASE1">PHASE1</option>
    <option value="PHASE2">PHASE2</option>
    </select>
  </td>
  <td>
    <div id="otherValues" style="display:none">
       <label for="salesNumber">Sales No开发者_运维知识库</label><br />
       <input type="text" name="salesNumber" id="salesNumber" value="[server]" />
    </div>
  </td>
</tr>


Just add the script call to ensure toggle gets called when the pages loads to initialize the divs visibility.

<tr>
  <td>
    <label for="sales">Sales:</label><br />
    <select name="sales" onchange="toggleTbox( document.salesEntry.salesEntry.options[ document.salesEntry.rxGateway.selectedIndex ].value );">
    <option value="[server]">[server]</option>
    <option value="NONE">NONE</option>
    <option value="PHASE1">PHASE1</option>
    <option value="PHASE2">PHASE2</option>
    </select>
  </td>
  <td>
    <div id="otherValues" style="display:none">
       <label for="salesNumber">Sales No</label><br />
       <input type="text" name="salesNumber" id="salesNumber" value="[server]" />
    </div>
    <script type="text/javascript">
       toggleTbox( document.salesEntry.salesEntry.options[document.salesEntry.rxGateway.selectedIndex ].value );
    </script>
  </td>
</tr>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜