Multiple select boxes

Forum Moderators: open

Message Too Old, No Replies

Multiple select boxes

malcolmcroucher

2:48 pm on Sep 5, 2008 (gmt 0)

i been searching but cannot find anything :

what im looking to do is a select box which triggers another select box.

so for instance

x = 12345
y = 6789

so you select x and then it displays 12345 in another box ?

any one know of any good articles ?
im sure there are

Malcolm

dreamcatcher

8:26 pm on Sep 5, 2008 (gmt 0)

Sounds like you need Ajax. There are lots of free code snippets online for what you want to do.

malcolmcroucher

2:38 pm on Sep 6, 2008 (gmt 0)

I assume you need a compiler to code javascript ? liek to code php c# .

Do you know where i could get one ? please tell me it is free ?

lavazza

4:13 am on Sep 7, 2008 (gmt 0)

Any recent browser can 'compile' javascript...

NOTE: as many users turn it off by default, client-side scripts are not guaranteed to run

Hopefully the following makes sense

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en-GB"> 
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <title>populate a select </title> 
  <script  type="text/javascript"> 
   function populateSelect(optionList, optionValue, optionText) 
    { 
     optionList[optionList.length] = new Option(optionText, optionValue); 
    } 
   function clearOptions(optionList) 
    { 
     for (i = optionList.length; i >= 0; i = i - 1) 
      { 
       optionList[i] = null; 
      } 
    } 
   function populateMySecondarySelect() 
    { 
      var myPrimarySelectList = document.myFormName.myPrimarySelect; 
     clearOptions(document.myFormName.mySecondarySelect); 
      if (myPrimarySelectList[myPrimarySelectList.selectedIndex].value == "alpha") 
      { 
       populateSelect(document.myFormName.mySecondarySelect, "0", "Please select an A word:"); 
       populateSelect(document.myFormName.mySecondarySelect, "1", "Apple"); 
       populateSelect(document.myFormName.mySecondarySelect, "2", "And"); 
       populateSelect(document.myFormName.mySecondarySelect, "3", "At"); 
       populateSelect(document.myFormName.mySecondarySelect, "4", "After"); 
       } 
      if (myPrimarySelectList[myPrimarySelectList.selectedIndex].value == "beta") 
      { 
       populateSelect(document.myFormName.mySecondarySelect, "0", "Please select a B word:"); 
       populateSelect(document.myFormName.mySecondarySelect, "1", "boat"); 
       populateSelect(document.myFormName.mySecondarySelect, "2", "bat"); 
       populateSelect(document.myFormName.mySecondarySelect, "3", "bar"); 
       } 
      if (myPrimarySelectList[myPrimarySelectList.selectedIndex].value == "charlie") 
      { 
       populateSelect(document.myFormName.mySecondarySelect, "0", "Please select a C word:"); 
        populateSelect(document.myFormName.mySecondarySelect, "1", "cat"); 
        populateSelect(document.myFormName.mySecondarySelect, "2", "coat"); 
        populateSelect(document.myFormName.mySecondarySelect, "3", "car"); 
        populateSelect(document.myFormName.mySecondarySelect, "4", "can"); 
       } 
    }  
  </script> 
 </head> 
 <body> 
  <form  name="myFormName" method="post" action="#"> 
   <h1>  
    Populate a Select 
   </h1> 
   <hr>  
   <noscript> 
    <p> 
     If you can see this message it means that your browser is not running JavaScript 
    </p> 
   </noscript> 
   <p> 
    <select name="myPrimarySelect" onChange="populateMySecondarySelect();"> 
     <option value="0">  Please select:   </option> 
     <option value="alpha"> A  </option> 
     <option value="beta">  B  </option> 
     <option value="charlie"> C  </option> 
    </select> 
    <br> 
    <br> 
    <select  name="mySecondarySelect"> 
     <option>    </option> 
    </select> 
   </p> 
  </form>  
 </body> 
</html>

malcolmcroucher

10:08 am on Sep 7, 2008 (gmt 0)

thanks for that i got it working , am wondering if you can mix php javascript and mysql ?

malcolmcroucher

10:11 am on Sep 7, 2008 (gmt 0)

no fears got it working woth php and mysql .

malcolmcroucher

10:42 am on Sep 7, 2008 (gmt 0)

I dunno if this will work , it sort of working but can you mix javascript and php ? like i have done below ?

Regards

<?php
include "dbaconnect.php" ;

$i=1;

<?
$sql2="SELECT * FROM country";
$query = mysql_query($sql2);

while
($row2 = mysql_fetch_array($query))
{

echo $row2['country'] ;

}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-GB">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>populate a select </title>
<script type="text/javascript">
function populateSelect(optionList, optionValue, optionText)
{
optionList[optionList.length] = new Option(optionText, optionValue);
}
function clearOptions(optionList)
{
for (i = optionList.length; i >= 0; i = i - 1)
{
optionList[i] = null;
}
}

function populateMySecondarySelect()
{
var myPrimarySelectList = document.myFormName.myPrimarySelect;
clearOptions(document.myFormName.mySecondarySelect);
if (myPrimarySelectList[myPrimarySelectList.selectedIndex].value == "Ghana")
{
populateSelect(document.myFormName.mySecondarySelect, "0", "Please select an A word:");
<?php
$sql1="SELECT * FROM city";
$query = mysql_query($sql1);
while
($row1 = mysql_fetch_array($query))
{
$i;
echo 'populateSelect(document.myFormName.mySecondarySelect, "',$i,'", "',$row1['city'],'");';
$i++;
}
?>

}
if (myPrimarySelectList[myPrimarySelectList.selectedIndex].value == "New York")
{
populateSelect(document.myFormName.mySecondarySelect, "0", "Please select a B word:");
populateSelect(document.myFormName.mySecondarySelect, "1", "boat");
populateSelect(document.myFormName.mySecondarySelect, "2", "bat");
populateSelect(document.myFormName.mySecondarySelect, "3", "bar");
}
if (myPrimarySelectList[myPrimarySelectList.selectedIndex].value == "Chicago")
{
populateSelect(document.myFormName.mySecondarySelect, "0", "Please select a C word:");
populateSelect(document.myFormName.mySecondarySelect, "1", "cat");
populateSelect(document.myFormName.mySecondarySelect, "2", "coat");
populateSelect(document.myFormName.mySecondarySelect, "3", "car");
populateSelect(document.myFormName.mySecondarySelect, "4", "can");
}
}

</script>

</head>
<body>
<form name="myFormName" method="post" action="#">
<h1>
Populate a Select
</h1>
<hr>
<noscript>
<p>
If you can see this message it means that your browser is not running JavaScript
</p>
</noscript>
<p>

<?php
$sql3="SELECT * FROM country";
$query = mysql_query($sql3);

echo '<select name="myPrimarySelect" onChange="populateMySecondarySelect();"> ';
while
($row3 = mysql_fetch_array($query))
{

echo '<option value="',$row3['country'],'">',$row3['country'] ,'</option>';

}
echo '</select>';

?>

<br>
<br>
<select name="mySecondarySelect">
<option> </option>
</select>
</p>
</form>
</body>
</html>

mysql_close($con) ;

malcolmcroucher

1:55 pm on Sep 7, 2008 (gmt 0)

what i think is happeneing in the previous post is that it is not passing the country name through so the function is not working .
Via the :
onChange="populateMySecondarySelect();"