Selected list item with javascript

Hi,

this question is a continuation from the following question;

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22961965.html

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.

LVL 1
jset_expertAsked:
Who is Participating?
 
gops1Connect With a Mentor Commented:
Here is a sample code on how to change the values of a dropdown through javascript:

<html>
      <head>
            <title>Script Demo Gops&reg;</title>
            <style>
                  body, table,input, select,span{font-family:verdana;font-size:xx-small;}
            </style>
            <script language="javascript">
                  var c=0;
                  function changeOpt() {
                        var s=document.getElementById('sel');
                        c++;
                        if(c<s.options.length)s.selectedIndex=c;
                  }
            </script>
      </head>
      <body>
            <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>
            </select>
            <br>
            <input type="button" value="Change" onclick="changeOpt()">
      </body>
</html>
0
 
jset_expertAuthor Commented:
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.
0
 
gops1Commented:
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.
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
jset_expertAuthor Commented:
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.

thanks
0
 
Michel PlungjanIT ExpertCommented:
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
setCookie('countrystate',document.frmCheckout.ddlCountry.selectedIndex+'|'+document.frmCheckout.ddlState.selectedIndex);

in your onChange of each select and add this script
<script language="javascript">
function init() {
  var countryIndex = document.frmCheckout.ddlCountry.selectedIndex; 
  if (countryIndex > 0) {
    getStates(document.frmCheckout.ddlCountry.options[document.frmCheckout.ddlCountry.selectedIndex].value);
  }
  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
    }
  }
}
</script>

Open in new window

0
 
jset_expertAuthor Commented:
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?
0
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
If you have the index in the php, change
   echo $js_droplist;
to
   echo $js_droplist;
   echo "selbox.selectedIndex=".$selectedStateIndex; // assuming it did not change
0
 
Computer101Commented:
Forced accept.

Computer101
Community Support Moderator
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.