tags:

views:

415

answers:

2

i have to fill a select ooption list dynamically with the selection of diffent-2 radiobuttons using java script.. right now i am applyiing it but it is not working properly

{
 var i;
 var x1;
 var x3;
 var x=document.getElementById("ddbudget_min");//option list1
 var x2=document.getElementById("ddbudget_max");//optionlist2
 x1=x.length;
 for (x1 = x.length; x1 >= 0; x1--) {
      x[x1] = null;
 }
 x3=x2.length;
 for (x3 = x2.length; x3 >= 0; x3--) {
     x2[x3] = null;
 }


 x[0] = new Option("select min", 1);
 x[1] = new Option(1000, 2);
 x[2] = new Option(5000, 3);
 x[3] = new Option(10000, 4);
 x[4] = new Option(20000, 5);
 x[5] = new Option(50000, 6);
 x[6] = new Option("1 lakh", 7);
 x[7] = new Option(">1 lakh", 8);

 x2[0] = new Option("select max", 0);
 x2[1] = new Option(1000, 1);
 x2[2] = new Option(5000, 2);
 x2[3] = new Option(10000, 3);
 x2[4] = new Option(20000, 4);
 x2[5] = new Option(50000, 5);
 x2[6] = new Option("1 lakh", 6);
 x2[7] = new Option(">1 lakh", 7);
}
A: 

look into jquery.com - using this library should make it a piece of cake.

Michal Rogozinski
but i want the java script
saurabh
JQuery is javascript. It will make your life much easier.
Steven Devijver
Simply pointing him to jQuery.com is not an answer -1
ichiban
+1  A: 

@Saurabh - Since you are not interested in jQuery (which I would agree is the best way to go), I'm assuming this may be what you are looking for in plain old school javascript style. Just copy the html/javascript below and give it a try.

<html>
<head>
  <title>Test Page For Min/Max Options</title>
<script>    
 var minOptions=[];
 minOptions[0] = new Option("Select Min", 1);
 minOptions[1] = new Option(1000, 2);
 minOptions[2] = new Option(5000, 3);
 minOptions[3] = new Option(10000, 4);
 minOptions[4] = new Option(20000, 5);
 minOptions[5] = new Option(50000, 6);
 minOptions[6] = new Option("1 lakh", 7);
 minOptions[7] = new Option(">1 lakh", 8);

 var maxOptions=[]; 
 maxOptions[0] = new Option("Select Max", 0);
 maxOptions[1] = new Option(1000, 1);
 maxOptions[2] = new Option(5000, 2);
 maxOptions[3] = new Option(10000, 3);
 maxOptions[4] = new Option(20000, 4);
 maxOptions[5] = new Option(50000, 5);
 maxOptions[6] = new Option("1 lakh", 6);
 maxOptions[7] = new Option(">1 lakh", 7);

 window.onload = function() {
   for(i=0; i < minOptions.length; i++){
      document.getElementById("ddbudget_min").options.add(minOptions[i]);
   }
   for(i =0; i < maxOptions.length; i++){
      document.getElementById("ddbudget_max").options.add(maxOptions[i]);
   }
 }
 function selectMinMax(e){
     document.getElementById("ddbudget_min")
             .style.display = e.value == 'min' ? 'block' : 'none';
     document.getElementById("ddbudget_max")
             .style.display = e.value == 'max' ? 'block' : 'none';
}

</script>
</head>
<body>
<form method="get" action="">
  <input type="radio" name="radioMinMax" value="min" 
                     onclick="selectMinMax(this)" checked />Minimum
  <input type="radio" name="radioMinMax" value="max" 
                     onclick="selectMinMax(this)" />Maximum<br/>
  <select id="ddbudget_min" name="ddbudget_min" 
                               style="display:block"></select>
  <select id="ddbudget_max" name="ddbudget_max" 
                              style="display:none"></select>
</form>
</body>
</html>
Jose Basilio