Preselect drop down box using javascript

rkoya · Jun 15, 2006

Hi,

I have 3 drop down boxes, one contains the country, second is the pickup location and third is the dropoff location.

Basically when the page loads, I want it to select the country as USA the pick up as los angeles and drop off as los angeles. I have tried using the selectedIndex, but it doesn't seem to populate the country and pickup. So my code is as follows:

<select accessKey="o" name="area" style="margin-left:2px;"
onchange="document.details.slct.value=0;ckDstn(document.details.elements['area'].options[document.details.elements['area'].selectedIndex].value);">
<OPTION VALUE="132"> USA
</option></select>

select accessKey="o" name="tlocation" class="t3" onChange="this.form.slct.value = this.selectedIndex;ckPickUp(document.details.elements['tlocation'].options[document.details.elements['tlocation'].selectedIndex].value);">
<option value="" class="t3">select a location</option>
</select>

<select accessKey="o" name="tdropoff" class="t3" onChange="this.form.slct2.value = this.selectedIndex">
<option value="" class="t3">select a location</option>
</select>
<script>

document.details.area.options[document.details.area.selectedIndex].value=132;

document.details.tlocation.options[document.details.tlocation.selectedIndex].value="los angeles airport";

document.details.tdropoff.options[document.details.tdropoff.selectedIndex].value="los angeles airport";
</script>

Can anyone help and let me know what I am doing wrong

Thanks

cLFlaVA · Jun 15, 2006

if you know the index, set the index. this will do:

Code:

var f = document.forms['details'];
f.elements['area'].selectedIndex = 130;
f.elements['tlocation'].selectedIndex = 40;
f.elements['tdropoff'].selectedIndex = 40;

Where 130, 40 and 40 are the indeces of the values you want selected by default.

If this will always be the case, you could also just specify "selected" in the option tag...

Code:

<select name="area">
   <option value="blah">Blah</option>
   <option value="something" [red]selected[/red]>Something</option>
</select>

*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

rkoya · Jun 15, 2006

Hi,

That seemed to populate the area (country) but not the rest. The pickup and drop off is populated once the country has been selected, so i need the country to say USA and the other 2 drop downs to say los angeles.

Thanks

cLFlaVA · Jun 15, 2006

you aren't giving very much information. however you are filling your second and third select boxes, you should use the same method (javascript? asp? php?) to determine whether or not a single option in the select box is "selected".

i can't be much more help unless you let me know how you're populating the boxes, and perhaps showing the code that populates them.

*cLFlaVA
----------------------------
[tt]( <P> <B>)¹³ * (<P> <.</B>)[/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]

theniteowl · Jun 15, 2006

rkoya, on page load execute a function that will call your other functions to set the values.

Code:

<body onload="setDefaults();">

function setDefaults() {
  document.details.slct.value=0;
  ckDstn([COLOR=red]index number for USA[/color]);
  ckPickUp([COLOR=red]index number for State[/color]);
  var f = document.forms['details'];
  f.elements['tdropoff'].selectedIndex = 40;
}

Your onchange events do the same thing already but you want it to occur when the page loads so you just make a function to call the function to set first area, then tlocation and then finally manually set it for tdropoff with the code cLFlaVA posted.

Google, you're my hero!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Preselect drop down box using javascript

rkoya

IS-IT--Management

cLFlaVA

Programmer

rkoya

IS-IT--Management

cLFlaVA

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor