Solved

Dynamix Multiple Select Re-opened

Posted on 2003-10-27
12
373 Views
Last Modified: 2012-06-21
I am very sorry the question I had here: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20779493.html

Had been answered I thought but it seems I overlooked some thing. The posted solution was this one:

<html>
<body>
<script>
Countries = new Array(
     new Array("Greece","Athens","Patras","Larisa"),
     new Array("Italy","Rome","Milano","Valencia"),
     new Array("Spain","Madrid","Barselona","Balero")
)
function fillcountry(f)
{
     f.city.length=null;
     for(var i=0; i<f.country.length;i++)
     {
          if(f.country[i].selected)
          {
               for(var j=0;j<Countries[f.country[i].value*1-1].length-1;j++)
               {
                    f.city.length++;
                    f.city.options[f.city.length-1].text=Countries[f.country[i].value*1-1][j+1]
          f.city.options[f.city.length-1].value=Countries[f.country[i].value*1-1][j+1];
               }
          }
     }
}
</script>
<form>
     <select onchange=fillcountry(this.form) name=country multiple size=5>
          <option value=1>Greece
          <option value=2>Italy
          <option value=3>Spain
     </select>
     <select name=city>
          <option>select city
     </select>
</form>
</body>
</html>

This solution works but I need the country selection box to have the country name instead of the numbers so:

          <option value=Greece>Greece
          <option value=Italy>Italy
          <option value=Spain>Spain

Anybody know how to make that work in the same way? I need this fixed quickly if possible.

Thanks again, if there was a way to re-open my previous question then I am sorry for posting again. I just signed up today....
0
Comment
Question by:pgkooijman
[X]
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
  • 5
  • 3
  • 2
  • +1
12 Comments
 
LVL 3

Assisted Solution

by:superslamwich
superslamwich earned 50 total points
ID: 9630918
The answer is in associative arrays:

<html>
<body>
<script>
Countries = new Array();
Countries["Greece"] = new Array("Greece","Athens","Patras","Larisa");
Countries["Italy"] = new Array("Italy","Rome","Milano","Valencia");
Countries["Spain"] = new Array("Spain","Madrid","Barselona","Balero");
function fillcountry(f)
{
    f.city.length=null;
    for(var i=0; i<f.country.length;i++)
    {
         if(f.country[i].selected)
         {
              for(var j=0;j<Countries[f.country[i].value].length-1;j++)
              {
                   f.city.length++;
                   f.city.options[f.city.length-1].text=Countries[f.country[i].value][j+1]
        f.city.options[f.city.length-1].value=Countries[f.country[i].value][j+1];
              }
         }
    }
}
</script>
<form>
    <select onchange=fillcountry(this.form) name=country multiple size=5>
         <option value="Greece">Greece</option>
         <option value="Italy">Italy</option>
         <option value="Spain">Spain</option>
    </select>
    <select name=city>
         <option>select city
    </select>
</form>
</body>
</html>

{Slam}
0
 
LVL 25

Assisted Solution

by:devic
devic earned 150 total points
ID: 9630961
hi pgkooijman,

superslamwich answered, i wanted to change something:

==============================================
<html>
<body>
<script>
Countries = new Array();
Countries["Greece"] = new Array("Athens","Patras","Larisa");
Countries["Italy"] = new Array("Rome","Milano","Valencia");
Countries["Spain"] = new Array("Madrid","Barselona","Balero");
function fillcountry(f)
{
   f.city.length=null;
   for(var i=0; i<f.country.length;i++)
   {
        if(f.country[i].selected)
        {
             for(var j=0;j<Countries[f.country[i].value].length;j++)
             {
                  f.city.length++;
                  f.city.options[f.city.length-1].text=Countries[f.country[i].value][j]
                           f.city.options[f.city.length-1].value=Countries[f.country[i].value][j];
             }
        }
   }
}
</script>
<form>
   <select onchange=fillcountry(this.form) name=country multiple size=5>
        <option value="Greece">Greece</option>
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
   </select>
   <select name=city>
        <option>select city
   </select>
</form>
</body>
</html>

==========================================================


0
 
LVL 25

Expert Comment

by:devic
ID: 9630983
pgkooijman, you accepted the answer,  but you can ask again in the same topic, no problem.
If you post on  http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20779493.html, i  and othr members become the message.

good luck!
devic
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 7

Accepted Solution

by:
Xxavier earned 50 total points
ID: 9630999
pgkooijman,
     The solution I posted in the last question did that

<html>
<head>
<script>
Canada=new Array ("Bc","Alta","Sask","Mb","Ont")
USA =new Array ("Al","Ark","Cal","Md","Tx")

function update(val)
{
obj=document.f1.mySelect
switch (val)
 {
      case "USA" :
     
      for (i=0;i<=USA.length-1;i++)
             obj.options[obj.options.length] =new Option(USA[i],USA[i])
 
      break;
      case "Canada" :
      for (i=0;i<=Canada.length-1;i++)
             obj.options[obj.options.length] =new Option(Canada[i],Canada[i])

      break;
 
     default :
 }
}
</script>

<title></title>

</head>

<body>
<form name="f1">
  <p><select name="mySelect" size="1">
  </select></p>
  <p><select size="1" onchange="update(this.value)">
    <option>Select</option>
    <option value="USA">USA</option>
    <option value="Canada">Canada</option>
  </select></p>
</form>
</body>
</html>
0
 
LVL 7

Expert Comment

by:Xxavier
ID: 9631008
I f you want number values associated with each set that is easily done as well.
0
 
LVL 3

Expert Comment

by:superslamwich
ID: 9631021
@devic
    I was just working with what he gave me, but ya, you can simplify the code a little
0
 

Author Comment

by:pgkooijman
ID: 9631304
Wow, thanks guys. It is exactly what I need. I divided the points amongst you. This platform is quite amazing at $9.99/month.

Devic, will PayPal you a ferrari once we IPO okay.... :)
0
 

Author Comment

by:pgkooijman
ID: 9631343
Just one thing: of course my list of countries is huge containing all countries in the world. At this moment I get a JScript error if I do not have an array for a specific country. Is there a way to make it work without there being an array for all countries?
0
 
LVL 25

Expert Comment

by:devic
ID: 9632261
i don't understood the problem, can you post some code wehere is error. Or upload this on the server and give the link.
0
 
LVL 25

Expert Comment

by:devic
ID: 9632279
pgkooijman, tell me please, what IPO mean? :)
0
 

Author Comment

by:pgkooijman
ID: 9634978
IPO, initial public offering, when your company brings out stocks which usualy makes the company owner an instant millionaire...

This is the problem. As you can see I added two additional countries in the selection boxes. For these countries there is now array so I get an error when I click on them. Do I need to make an array for each country? If so that would mean a lot of work as I have 250+ countries.... Is there a way to make it work if there is no array for a country in the list?

<html>
<body>
<script>
Countries = new Array();
Countries["Greece"] = new Array("Athens","Patras","Larisa");
Countries["Italy"] = new Array("Rome","Milano","Valencia");
Countries["Spain"] = new Array("Madrid","Barselona","Balero");
function fillcountry(f)
{
   f.city.length=null;
   for(var i=0; i<f.country.length;i++)
   {
        if(f.country[i].selected)
        {
             for(var j=0;j<Countries[f.country[i].value].length;j++)
             {
                  f.city.length++;
                  f.city.options[f.city.length-1].text=Countries[f.country[i].value][j]
                        f.city.options[f.city.length-1].value=Countries[f.country[i].value][j];
             }
        }
   }
}
</script>
<form>
   <select onchange=fillcountry(this.form) name=country multiple size=5>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Greece">Greece</option>
        <option value="Italy">Italy</option>
        <option value="Spain">Spain</option>
   </select>
   <select name=city size=5>
        <option>select city
   </select>
</form>
</body>
</html>

Thanks again buddy!
0
 
LVL 25

Expert Comment

by:devic
ID: 9635227
hi pgkooijman,

thanks for info about IPO :)

>>>Do I need to make an array for each country?
yes you do.

so you don't need anymore to add in dropdown, only add new country+cities in array.
first item must be country and then cities. Cities are optional.

look here:

=======================================
<html>
<body>
<script>
Countries = new Array
(
      new Array("United States","New York","Washington","Detroit"),
      new Array("United Kingdom","London","Liverpool","Manchester"),
      new Array("Greece","Athens","Patras","Larisa","Kavala","Xanthi", "Komotini", "Alexandropoli"),
      new Array("Italy","Rome","Milano","Valencia"),
      new Array("Spain","Madrid","Barselona","Balero"),
      new Array("France","Paris"),
      new Array("Portugal")
)

function fillcountry(f)
{
   f.city.length=null;
   for(var i=0; i<f.country.length;i++)
   {
        if(f.country[i].selected)
        {
             for(var j=0;j<Countries[i].length-1;j++)
             {
                  f.city.length++;
                  f.city.options[f.city.length-1].text=Countries[i][j+1]
                  f.city.options[f.city.length-1].value=Countries[i][j+1];
             }
        }
   }
}
function renderCountries()
{

      for(var i=0;i<Countries.length;i++)
      {
            document.write("<option value="+Countries[i][0]+">"+Countries[i][0])
      }
}
</script>
<form>
   <select onchange=fillcountry(this.form) name=country multiple size=5>
    <script>
            renderCountries();
      </script>
   </select>
   <select name=city size=5>
        <option>select city
   </select>
</form>
</body>
</html>
0

Featured Post

Want Experts Exchange at your fingertips?

With Experts Exchange’s latest app release, you can now experience our most recent features, updates, and the same community interface while on-the-go. Download our latest app release at the Android or Apple stores today!

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

627 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