Trying to get option menu to auto-select based on URL parameter

[drdada]

I want a page to have a different item pre-selected in an option menu-button according to the parameter at the end of the URL. Eg if the URL ends in "?choice=Beta", the item that says "Beta" should be pre-selected. Here's what I have so far:

<script type="text/javascript">
function show(choice) { 
  var success = -1;
  for (var i=0; i < document.frmInput.cboNames.length; i++) {
    if (document.frmInput.cboNames.options[i].text == choice) 
      success = [i];
  }
  document.frmInput.cboNames.selectedIndex=success;
} 

var choice = location.href.split("?")[1].split("=")[1];
document.write('<p>Choice: ' + choice + '</p>');
show(choice);
</script>

<form name="frmInput">
  <p>Choice: 
  <select name="cboNames">
    <option value="1">Alpha</option>
    <option value="2">Beta</option>
    <option value="3">Gamma</option>
    <option value="4">Delta</option>
  </select>
  </p>
  <p><input type=button name="btnInput" value="Choose" onclick="var choice = location.href.split('?')[1].split('=')[1];show(choice);"></p>
</form>

I know the parameter (choice) is being picked up OK, because of the first paragraph - generated by "document.write()". And I know the code for selecting the right item ("show()") is OK because of the "Choose" button. But why doesn't "show(choice)" get triggered right after "document.write('<p>Choice: ' + choice + '</p>')"?

I know I could put an "onload" into my body element, but it's not that easy to do that because this page is to be part of a CMS-driven site.

Thanks.

[DustFrog]

I'm assuming that the code that you posted is in the same order in your page in question. If so, I believe show(choice) in the script tag is failing because the form elements have not been created at this point.

Try adding another inline script element after the form and move the show(choice) call to it and see what happens.

[drdada]

Of course, that was it. Thanks very much.

[xuantzec]

That code really helped me a lot. Now... I'm trying to implement it on two different drop-downs on the landing page, having for example these two options: example.html?choice=Beta and example.html?choice2=Green

I dupplicated the inline script and placed it bellow the second dropdown editing the values so that "choice2" (and the second form imput) will be recognized. It works but somehow, when choosing "example.html?choice2=Green" the first dropdown gets lost trying to find an unexisting parameter and ends selecting nothing.

Is there a way to keep the first dropdown with the default value selected (like: <option value="" selected="selected">--Choose one please--</option>) when a value of the second dropdown is summoned?

I really have'nt much experience working on js and any suggestion will be highly appreciated!

Thank!

[synergi]

<Input name='Input'>
Choice:
<select name='Input'>
<option value= 1 >1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>
</select>
<input type=button name='Max' value='Max' onclick='Max' show(choice);">
</Input>

Hi I'm pretty fresh with making user scripts so any help would be apprechiated.

The Option value may varry from 1 to 50. I can select the Max button but I want to make a choice. Any Ideas anyone