Solved

Dynamix Multiple Select Re-opened

Posted on 2003-10-27
12
354 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now