Selected list item with javascript

Posted on 2007-11-14
Last Modified: 2008-02-20

this question is a continuation from the following question;

How set the selected value from the state drop down with Javascript?

As you can see from the previous question, I build my drop down list with PHP and javascript. When the page is refreshed, then so is the value that the user selected.

Question by:jset_expert
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
LVL 17

Accepted Solution

gops1 earned 150 total points
ID: 20286934
Here is a sample code on how to change the values of a dropdown through javascript:

            <title>Script Demo Gops&reg;</title>
                  body, table,input, select,span{font-family:verdana;font-size:xx-small;}
            <script language="javascript">
                  var c=0;
                  function changeOpt() {
                        var s=document.getElementById('sel');
            <select id="sel">
                  <option value="">--Select--</option>
                  <option value="Opt1">Opt 1</option>
                  <option value="Opt2">Opt 2</option>
                  <option value="Opt3">Opt 3</option>
                  <option value="Opt4">Opt 4</option>
            <input type="button" value="Change" onclick="changeOpt()">

Author Comment

ID: 20286984
Hi can you relate that code back to my drop list, which is dynamically assigned using PHP and Javascript.

i can see that the '.selectedIndex' function will set the option, but not sure how to associate this back to my existing code.
LVL 17

Expert Comment

ID: 20287002
I am weak in PHP, but tell me one thing what value are you going to pass, is it the number, or the value that you are going to pass.
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.


Author Comment

ID: 20287092
i will pass a number, this will be the state unique id from the db, which is also the value for the option on the drop list.

LVL 75

Expert Comment

by:Michel Plungjan
ID: 20287465
I am assuming your have a country drop and a state drop

If the statedrop needs to match the country drop you could do this:

I also assume you have a standard cookie script - if not, I can give you one

You need to do a

in your onChange of each select and add this script
<script language="javascript">
function init() {
  var countryIndex = document.frmCheckout.ddlCountry.selectedIndex; 
  if (countryIndex > 0) {
  var sels = getCookie('countrystate');
  if (sels) {
     var countrystate = sels.split('|');
    if (countryState[0] == countryIndex) { // did we have the same country as previous
      document.frmCheckout.ddlState.selectedIndex=countryState[1]; // set the state to the same state

Open in new window


Author Comment

ID: 20293987
I am not using cookies at all at the moment.

All the data is stored with variables on the current page.

I can grab the state variable selected, do I need to use cookies?
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 150 total points
ID: 20296859
If you have the index in the php, change
   echo $js_droplist;
   echo $js_droplist;
   echo "selbox.selectedIndex=".$selectedStateIndex; // assuming it did not change

Expert Comment

ID: 20943736
Forced accept.

Community Support Moderator

Featured Post

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question