CODEWITHSUNDEEP
smarty
Ecxzqute
Ecxzqute

Reputation: 51

$smarty - How to Dynamically change select box option value on the fly

I am a newbie of smarty so please pardon my innocence :oops:

I am following a code left by previous programmer and i have this problem on dynamically changing the values of a select box depending on the selected value of another select box.

So here's the situation:

I have drop down named "Section" and another one named "Subsection".

What i need to come up with is that when i choose a Section the Values of the Subsection will change too and only displays the Subsections which is under that section selected.

here's a javascript simulation of the problem:

<html> 
<head> 
<title>Box changing demo</title> 
    <script type="text/javascript"> 

        var items = new Array(); 

        items[0] = new Array("Dog", "Cat", "Pig"); 
        items[1] = new Array("Andromeda", "Boötes", "Cepheus"); 
        items[2] = new Array("Mercury", "Venus", "Earth"); 
        items[3] = new Array("BMW", "Audi", "Bugatti"); 

        function changeItems(){; 
            num=document.changer.section.options[document.changer.section.selectedIndex].value; 
            document.changer.subsection.options.length = 0; 
            for(i=0; i<items[num].length; i++){ 
                document.changer.subsection.options[i] = new Option(items[num][i], items[num][i]); 
            } 
        } 

    </script> 
</head> 
<body> 

    <form name="changer"> 
         <select name="section" onchange="changeItems();"> 
              <option value="0">Animals</option> 
              <option value="1">Constelations</option> 
              <option value="2">Planets</option> 
              <option value="3">Cars</option> 
         </select> 

         <select name="subsection"> 
          <!--<option>tgntgn</option> -->
         </select> 
    </form> 

</body> 
</html>

This is what i need to do with smarty.

Anybody?

Thank you for your help.

Upvotes: 2

Views: 6227

Answers (3)

ungalcrys
ungalcrys

Reputation: 5610

try something like:

{html_options name=section options=$options selected=$index 
    onchange="changeItems();"}

where $options and $index (index of selected option in select tag) are assigned in php:

<?php
...
$smarty = new Smarty ();
...
$smarty->assign ( 'index', $some_php_val );
$smarty->assign ( 'options', $some_php_array );
...
?>

for more info check:

http://www.smarty.net/docsv2/en/language.function.html.options.tpl http://www.smarty.net/forums/viewtopic.php?p=53422

Upvotes: 0

Dev_x7xClownx7x
Dev_x7xClownx7x

Reputation: 42

Hope This Answers Your Question

<!--JAVASCRIPT-->
<!--CREATE DROPBOX WHEN SEC1 IS SELECTED-->
<script>
var section= document.getElementById("section").value;
if(section == SEC1){
document.getElementById("subSEC").innerHTML='
  <select name="subsection" type="text" id="subsection">
  <option value=""></option>
  <option value="Sub1">Sub1</option>
  <option value="Sub2">Sub2</option>
  <option value="Sub3">Sub3</option>
  </select>"
';
}


</script>
<!--HTML MARKUP-->

<select name="section" type="text" id="section">
      <option value=""></option>
      <option value="SEC1">SEC1</option>
      <option value="SEC2">SEC2</option>
      <option value="SEC3">SEC3</option>
      </select>

<!--SPACE TO PLACE DROPBOX FROM JAVASCRIPT-->
<span id="subSEC">

</span>

Upvotes: 0

djn
djn

Reputation: 3948

You can't do it in Smarty, because it just cannot be done with HTML only. You have to use Javascript for this. Look at http://www.texotela.co.uk/code/jquery/select/ - it seems easy enough to implement.

Upvotes: 1

Related Questions