Solved

Dynamix Multiple Select Re-opened

Posted on 2003-10-27
12
366 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Bootstrap Form 16 41
Session on Html 8 42
Word Press Fixes to Google Speed Test Issues 2 25
How do I split a variable to newline 2 19
This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

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