CODEWITHSUNDEEP
phpjavascriptajaxselect
CBC_NS
CBC_NS

Reputation: 1957

Assistance with populating second <SELECT> with another <SELECT>

I have two SELECTS's. Both are populated via mysql queries. The second one needs to populate after the user makes a selection from the first <SELECT>. Could anyone provide some direction on how best to accomplish this?

As a side note, I was able to accomplish this with AJAX by sending the value to a different page and causing the second <SELECT> to pop up, but the thing is I don't want it to pop up after an option is selected, I just want it to populate. Perhaps I could alter my JS?

function showBus(selection_id)
{
    if (selection_id=="")
    {
        document.getElementById("Bus_Opt").innerHTML="";
        return;
    }    
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("Bus_Opt").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/includes/adminPages/selectBusiness.inc.php?selection_id="+selection_id,true);
xmlhttp.send();
 }

Hello Community,

Thank you for your responses. Some quick clarity, I basically just wanted both of my select boxes to appear at the same time even if the value of the first selection was "". To accomplish this I added this function.

window.onload = function() {
document.Search.group.onchange()
};

document.your_form_name.your_select_id_name.onchange();

Upvotes: 0

Views: 120

Answers (3)

Stano
Stano

Reputation: 8949

The procedure can look like this: in your selectBusiness.inc.php script encode the values you're sending to browsers via json-encode() function, e.g. 

if (isset($_GET['selection_id'])) {
  // here read the values from your database according to $_GET['selection_id'] and put them to array
  $arr = array('option1' => 'value1', 'option2' => 'value2', 'option3' => 'value3');
  $str = json_encode($arr); // convert the array to string
  echo $str; // {"option1":"value1","option2":"value2","option3":"value3"}
  exit;
}

Now in javascript replace the

document.getElementById("Bus_Opt").innerHTML=xmlhttp.responseText;

with the following code - it's using JSON.parse() function:

var obj = JSON.parse(xmlhttp.responseText); // convert the string back to object
console.log(obj); // 
var select2 = document.getElementById("select2");
select2.length = 0;
for (var prop in obj) {
    select2.options[select2.options.length] = new Option(prop, obj[prop]); // thanks to Erdo ;)
}

Upvotes: 0

Erdo Dirgagautama
Erdo Dirgagautama

Reputation: 571

Assuming you want second select to have these new options :

  • <option value='1'>First Value</option>
  • <option value='2'>Second Value</option>

And assuming your ajax's return value will be like this : 1@First Value|2@Second Value

Change your code document.getElementById("Bus_Opt").innerHTML=xmlhttp.responseText; By 

var a = xmlhttp.responseText;
var options = a.split('|');
secondSelect = document.getElementById("id_of_second_select");
secondSelect.length = 0; // delete all options from second select
for (i=0; i < option.length; i++) {
    option = options[i].split('@');
    optionValue = option[0];
    optionText = option[1];
    secondSelect.options[secondSelect.options.length] = new Option(optionValue, optionText); // Add new option to second select
}

Upvotes: 1

Kernel James
Kernel James

Reputation: 4074

Are you trying to achieve what is shown in the "multi-selects" example here?:

http://simpleajax.googlecode.com/svn/docs/demos/simple_demos.html

It uses a library called SimpleAjax.

Upvotes: 0

Related Questions