ansaurus

Question

Answer 1

A:

If I am understanding your question correctly, what you want to do is remove options from subsequent select boxes depending on what is selected in the previous years' select boxes. You should not have to submit any forms to do this - you should be able to do it purely in javascript. This code should help get you started:


<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">&lt;/script>
<script type="text/javascript">
    $(document).ready(function () {
     $(".year").change(function () {
      var name = $(this).attr("name");
      var checkYearNum = name.substr(4);
      var value = $(this).val();
      var removeFromLaterYears = function (index) {
       var yearNum = $(this).attr("name").substr(4);
       if (yearNum > checkYearNum) {
        var selector = "[value='" + value[0] + "']";
        $(this).children(selector).remove();
       }
      }
      $(".year").each(removeFromLaterYears);
     });
    });
</script>
</head>
<body>
<form>
<fieldset>
<select class="year" name="year1">
    <option value="">Select...</option>
    <option value="player1">Player 1</option>
    <option value="player2">Player 2</option>
    <option value="player3">Player 3</option>
</select>

<select class="year" name="year2">
    <option value="">Select...</option>
    <option value="player1">Player 1</option>
    <option value="player2">Player 2</option>
    <option value="player3">Player 3</option>
</select>

<select class="year" name="year3">
    <option value="">Select...</option>
    <option value="player1">Player 1</option>
    <option value="player2">Player 2</option>
    <option value="player3">Player 3</option>
</select>
</fieldset>
</form>
</body>
</html>

Basically, all this is doing is using JQuery to set an event that, when one of the selection boxes changes, removes the selection with the same value from any following selection boxes that have a year number (defined in the "name" attribute of each select box) that is greater than the year number of the selection box that was changed.

In addition to this, you will need to keep track of which selections have been removed from which selection boxes so that they can be re-added if the player is unselected.

Since you were talking about combo boxes as well, I assume you have a text input field in addition to the select boxes, but you can use the same principle with those.

If you're not familiar with JQuery you might want to get to know it - it makes stuff like this a lot easier. This would be a good place to start: http://docs.jquery.com/How_jQuery_Works. Hope this helps.

Steven Oxley 2009-11-20 16:15:55

Cheers StevenI've gone down a slightly different track with text boxes now to speed up the page draw. But your query will still work I think to remove the values from the combo and provides a really good starting point. CheersSteve

bhs 2009-11-20 17:40:19

Cool, I'm glad I could help.

Steven Oxley 2009-11-20 22:54:24

Answer 2

A:

I have three drop down list ,first for country second for state and third is city,wen i selectd country, state will populate with country, same as city, But my problem is after refreshing the page after selecting the select box, the value is changing,but i need to keep the values in select box after refreshment. please help me.my code is below,

<form method="post" action="" name="form1">
Country : <select name="country" nChange="getCity('findcity.php?country='+this.value)">
 <option value="">Select Country</option>
 <option value="1">USA</option>
 <option value="2">Canada</option>
     </select>
<br />City : <div id="citydiv">
 <select name="select">
 <option>Select City</option>
     </select>
 </div>
</form>

function getCity(strURL)
{         
 var req = getXMLHTTP(); // fuction to get xmlhttp object
 if (req)
 {
  req.onreadystatechange = function()
 {
  if (req.readyState == 4) { //data is retrieved from server
   if (req.status == 200) { // which reprents ok status                    
     document.getElementById('citydiv').innerHTML=req.responseText;
  }
  else
  { 
     alert("There was a problem while using XMLHTTP:\n");
  }
  }            
  }        
req.open("GET", strURL, true); //open url using get method
req.send(null);
 }
}

<? $country=$_GET['country'];
$link = mysql_connect('localhost', 'root', ''); /change the configuration if required
if (!$link) {
  die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax'); //change this if required
$query="select city from city where countryid=$country";
$result=mysql_query($query);?>
<select name="city">
<option>Select City</option>
<? while($row=mysql_fetch_array($result)) { ?>
   <option value><?=$row['city']?></option>
<? } ?>
</select>

dev 2010-05-31 06:20:20

ansaurus

tags:

views:

answers:

PHP Combo Box AJAX Refresh

related questions