Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Dynamix Multiple Select Re-opened

Posted on 2003-10-27
12
Medium Priority
?
383 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 200 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 600 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 
LVL 7

Accepted Solution

by:
Xxavier earned 200 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…

721 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