Dynamic two select dropdown

[rrahulrroshan]

Hi I want to have 2 select dropdown based on the value of 1st drop down without submit button.

But I m not getting dynamically the selected value in 1st drop down eg: year , so that i can use it for next selection. can anyone plz help me

Eg:

 <?php    

   mysql_connect('localhost','root','root');
mysql_select_db("dump");
        $result = mysql_query("SELECT DISTINCT year FROM date order by year ASC");


        echo "<select name = 'year' >";
        if(isset($_POST['year']))
        {
            echo "<option value='{$_POST['year']}'>{$_POST['year']}  </option>";

        }
        else
        {
            echo "<option value='Select year'> Select year </option>";

        }
        while($row = mysql_fetch_array($result,MYSQL_NUM))
        {
            if($_POST['year']!=$row[0])
            {
                echo "<option value={$row[0]}>{$row[0]}</option>";
            }
        }       
        echo "</select>  ";

  echo $year;

  // but the selected year is not getting echoed

  ?>

// get the year based on selection done 



<select name="table3" onChange="form1.submit()">

<?php 

$name=$_SERVER['HTTP_GSSO_USER'];
mysql_connect('localhost','root','root');
mysql_select_db("dump");

$query = "SELECT DISTINCT(month) FROM date where year = <?php echo $year; ?> order by month asc;";
echo $query;

$result = mysql_query("SELECT DISTINCT year FROM date order by year ASC");


        echo "<select name = 'month' >";
        if(isset($_POST['bin']))
        {
            echo "<option value='{$_POST['month']}'>{$_POST['month']}  </option>";

        }
        else
        {
            echo "<option value='Select month'> Select month </option>";

        }
        while($row = mysql_fetch_array($result,MYSQL_NUM))
        {
            if($_POST['bin']!=$row[0])
            {
                echo "<option value={$row[0]}>{$row[0]}</option>";
            }
        }       
        echo "</select>  ";

?>

[cereal]

Try to write echo $_POST['year']; if you want to use $year variable then you have to write $year = $_POST['year'];
Also, where did you get $_SERVER['HTTP_GSSO_USER']? I don't find this anywhere.

[rrahulrroshan]

sorry plz ignore $_SERVER['HTTP_GSSO_USER']?

Actually I wanted the value $year as dynamic value.

is there anyway to use it as a onchange event on selecting drop button

[paddysca]

Trying to figure this out myself. I believe they call it a chain array. I was looking for it for location state, location etc. to only display certain locations for each state. + for dates not to display 31 days when the user picks february etc. If you find any links let me know

[veedeoo]

Here is the Demo I made it for the other question in this forum.. Please feel free to copy the source and save all the javascript files to your server, and do not hotlink them from my site. I am just trying help out that is why I am publishing it on my site.

for the definite days of the month I think I must made one already.. I have just look where I keept those files..

[erietha88]

thank you so much, veedeoo. That's what i was looking for. You made the script so simple. All i have found untill now have long script and using arrays. Is it possible to change the value of the second dropdwon value into a hyperlink? I just need two drop down list, the second drop down will be a hyperlink list option with a go button.

[veedeoo]

Hi,

Yes, we can do that... I think that's pretty easy... visit this New DEMO. Just copy the source and just change the values for your requirements.

The main settings of the script is in the form .

 <!-- if you look closely I gave this form a name called dropdown. this is necessary for the javascript  -->
<form action = "" method = "post" name="dropdown">

  <!--  notice the id sitename? this is for the jquery id -->

  <select id="sitename">
    <option value="">--</option>

    <option value="msn">MSN</option>
    <option value="yahoo">Yahoo</option>
    <option value="daniweb">DaniWeb</option>

  </select>

  <!-- the jquery trigger here is the siteurl and javascript selector here is the urllist -->

 <select id="siteurl" name="urllist" >
 <option value="">--</option>

 <option value="http://msn.com/" class="msn">Visit MSN</option>
 <option value="http://Yahoo.com/" class="yahoo">Visit Yahoo</option>
 <option value="http://daniweb.com/" class="daniweb">Visit DaniWeb</option>

 </select>

 <script type="text/javascript">
 <!--
   function goUrl(){
   location = document.dropdown.urllist.options[document.dropdown.urllist.selectedIndex].value
  }
  //-->
 </script>

 <input type="button" name="test" value="Go!" onClick="goUrl()">

 <script type="text/javascript" charset="utf-8">
      $(function(){

        $("#siteurl").chained("#sitename");
      });
      </script>
  </form>

Remember the convention in chaining the event is like this.. for example, we have two selects in our form like so;

select id ="ONE "

select id = "TWO"

Then our jquery chained will be like this

$(function(){

        $("#TWO").chained("#ONE");
      });

It is Two chained to one. For three combo it should be something like this -> two chained to one -> three chained to two and one, and so forth.

[veedeoo]

I forgot to mention that if you need multiple url for the first selection item. The urls must be given the class name of the value of the item in the selection.. for example, the msn option above..

<!-- if we have different urls for this selection.. we need to use the value -> msn to be the class name in the second select -->
<option value="msn">MSN</option>

<!-- in the select should be something like this. Take a note of the class name msn -->

<option value="http://msn.com/" class="msn">Visit MSN</option>
<option value="url two" class="msn">MSN Url two</option>
<option value="url three" class="msn">MSN Url three</option>

<!-- you add as many as you want, as long as you are following the proper convention -->

Even with many selections, the process will be exactly the same as the two examples I have given here..

[gopi17]

veedoo, wanna ask you something....can this code be done purely in php(not using javascript)
thanks

[veedeoo]

Hi,

We can use pure php, but it will not be able to response as dynamic as in the javascript response. PHP must process the form query first, before it can post a response. Unlike javascript which can post response on event change, php has to be parsed on the server side. So, there will be a considerable amount of time in seconds lag in form post response in php.

What we can do to minimize the delayed response and prevent the page from reloading is to use ajax (another javascript derivatives). With ajax implementation we can let the front end handle the form and then pass the event change through ajax, and then let the ajax post and retrieve the results from php file. The result is pretty much the same as the above demo. The only difference is making a PHP script get involved in the process. A good example of this technique is this Demo, which can be easily rewritten to do the same effect as the pure javascript implementation above. In this demo, I have one php file called processor responsible for processing the posted data by the ajax. The result is then return and delivered by the ajax on the page without page reload.

Although the php hybrid I mentioned above is pretty possible and it will work, it will also require server resources to parse the php codes. While on the javascript written script, the server don't have to parse any php codes, it is all given to the browser. The only downside of the javascript is when the javascript support of the browser is turn off.

[Biiim]

veedoo, wanna ask you something....can this code be done purely in php(not using javascript)
thanks

As far as i know you can't copy what veedeoo has done in his demo above, thats client side scripting - css will be the closest you can get to interactivity on the webpage without using javascript, and css has no onclick!

nowadays javascript is so standard you can just say, well turn it on then or you can't use the site properly.

in pure php you would have to use form submits and iframes

[gokulllrajjj]

Hi Veedeoo ,This is awsome can u plz provide the scripts for both (Demo and new Demo) Since its server side scripting Iam not able to see it
Thanks