Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 388
  • Last Modified:

Dynamix Multiple Select Re-opened

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
pgkooijman
Asked:
pgkooijman
  • 5
  • 3
  • 2
  • +1
3 Solutions
 
superslamwichCommented:
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
 
devicCommented:
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
 
devicCommented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
XxavierCommented:
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
 
XxavierCommented:
I f you want number values associated with each set that is easily done as well.
0
 
superslamwichCommented:
@devic
    I was just working with what he gave me, but ya, you can simplify the code a little
0
 
pgkooijmanAuthor Commented:
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
 
pgkooijmanAuthor Commented:
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
 
devicCommented:
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
 
devicCommented:
pgkooijman, tell me please, what IPO mean? :)
0
 
pgkooijmanAuthor Commented:
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
 
devicCommented:
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 does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now