2-way dropdown from an array

Confidence · February 20, 2010

hi guys,

let us say i have an array looking like this

Array

(

[1] => Array

(

[phoneprovider] => tnt-phones

[tarif] => Cheap family

[phoneproviderID] => 22

[MostPopTarif] =>

[price] => 1.99

)

[2] => Array

(

[phoneprovider] => tnt-phones

[tarif] => Cheap single

[phoneproviderID] => 22

[MostPopTarif] =>

[price] => 1.90

)

[3] => Array

(

[phoneprovider] => tnt-phones

[tarif] => Cheap family plus

[phoneproviderID] => 22

[MostPopTarif] =>

[price] => 1.09

)

[4] => Array

(

[phoneprovider] => tnt-phones

[tarif] => Xtra time

[phoneproviderID] => 22

[MostPopTarif] => 1

[price] => 1.99

)

[5] => Array

(

[phoneprovider] => Megatelephone

[tarif] => Cheaper XL

[phoneproviderID] => 23

[MostPopTarif] =>

[price] => 1.49

)

[6] => Array

(

[phoneprovider] => helloephones

[tarif] => call me XL

[phoneproviderID] => 24

[MostPopTarif] =>

[price] => 2.99

)

[7] => Array

(

[phoneprovider] => helloephones

[tarif] => we call 15%

[phoneproviderID] => 24

[MostPopTarif] =>

[price] => 1.99

)

)

and so on....

i get this array from a web-service request, or query.

phoneprovider represent a phone provider...and each has their own tarifs...the phoneproviders have their spefici ID .

there is one single most popular tarif...of the hole array, marked as "most popular" by the value [MostPopTarif] => 1

now i want to get the following:

2 dropdown menus....and price as result.

when page is open, the "default" state...is the provider on dropdown 1 on left, with the most popular tarif on second dropdown in middle and price as value on far right.

and this changes dynamically when i pick another provider....etc

how can i implement this? in a form or a while-loop or something?

sreekuttan · February 21, 2010

AJAX

ohdang888 · February 21, 2010

If i understand correctly what you want, you don't need AJAX

you want a javscript function called on the onChange event of the form.

check this out and play with it:

<script>
function update(){
document.getElementById('div').innerHTML = document.getElementById('test').value;
}
</script>

<select id="test" onChange="update();">
  <option value="1">Volvo</option>
  <option value="2">Saab</option>
  <option value="3" selected>Mercedes</option>
  <option value="4">Audi</option>
</select>

<div id="div">3</div>

change the car names to the provide name and set the option value to the id of the provider.

Confidence · February 21, 2010

thanks ohdang,

but how is the second dropdown list then generated? i see only one (first) list looking at your solution.

ohdang888 · February 21, 2010

but how is the second dropdown list then generated? i see only one (first) list looking at your solution.

i don't understand what you're trying to do with this second dropdown, and how it will be related to the first. can you explain a lil more?

Confidence · February 21, 2010

well what is meant is dropdown lists not menus, so i probably expressed it wrong

in first dropdown list there are the telephone prvoiders.

then when i chose one of them (say tnt-phones) i would get in the second dropdown list all of it tariffs ( for example Cheap Famiy) and then i get the price of this tariff shown 1.99

this is what i managed today to make, to gain something close to this...but i am not satisfied with it, it looks unclean and without a concept.

first the index.php showing everything

<html>
<head>
<script src="javascript/jquery-1.4.js" type="text/javascript"></script>
<script src="javascript/selects.js" type="text/javascript"></script>

</head>
<body>
<form method="post" action="#">
<p><label>provider: <select id="provider" name="provider">
<?php
$provider_array = array('22' => 'tnt-phones', '23' => 'Megatelephone', 
'24' => 'helloephones');
foreach ($provider_array as $key => $value) {
    echo ('<option value="' . $key . '">' . $value . '</option>');
}
?>

</select></label> <label>tarif: <select id="tarif" name="tarif">
</select></label></p>
</form>

</body>
</html>

then the jquery -based js, selects.js

window.onload=initCs; 
var request = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
request = false;
}
}
@end @*/
if (!request && typeof XMLHttpRequest != 'undefined') {
request = new XMLHttpRequest();
}

function fillSelect(provider) {
var url = "tarife_ajax.php?provider=" + escape(provider);
request.open("GET", url, true);
request.onreadystatechange = go;
request.send(null);
}

function go() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var list=document.getElementById("tarif");
var tarifs=response.split('|');
for (i=1; i<tarifs.length; i++) {
   var x=document.createElement('option');
   var y=document.createTextNode(tarifs[i]);
   x.appendChild(y);
   list.appendChild(x);
   }
  }
}
}

function initCs() {
var provider=document.getElementById('provider');
provider.onchange=function() {
if(this.value!="") {
  var list=document.getElementById("tarif");
  while (list.childNodes[0]) {
list.removeChild(list.childNodes[0])
}
  fillSelect(this.value);
  }
}
fillSelect(provider.value);
}

and finally the Ajax file and php processing file. tarif_ajax.php

<?php
function doIt ($provider)
{
    switch ($provider) {
        case "22":
            return array(
            'Cheap family', 
            'Cheap single', 
            'Cheap family plus', 
            'Xtra time');
            break;
        case "23":
            return array(
            'Cheaper XL');
            break;
        case "24":
            return array(
            'call me XL', 
            'we call 15%');
            break;
    }
}
$provider = @$_GET['provider'];
$tarifs = doIt($provider);
foreach ($tarifs as $tarif) {
    echo '|' . $tarif;
}
?>

ohdang888 · February 22, 2010

I would stay away from AJAX on this, because i think you can echo the data with json_encode, and use JSON from then on out.

check this out:

<script>
function update(){
var data = {"tnt-phones":["tarif1","tarif2","tarif3"],"Megatelephone":["tarif1MEGA"]};

var v = document.getElementById('test').value;
var tarifs = data[v];

var newSelect = "<select id='tarif_select' onChange='updatePrice();'>";
var x;
for (x in tarifs)
  {
  newSelect = newSelect + "<option value='"+tarifs[x]+"'>"+tarifs[x]+"</option>";
  }
newSelect = newSelect + "</select>";

document.getElementById('div').innerHTML = newSelect;

}//end function


function updatePrice(){
var v = document.getElementById('tarif_select').value;

var data = {"tarif1":"$1", "tarif2":"$2", "tarif3":"$3", "tarif1MEGA":"$4"};

document.getElementById('price').innerHTML = data[v];
}
</script>

<select id="test" onChange="update();">
  <option value="0">Select Carrier</option>
  <option value="tnt-phones">tnt-phones</option>
  <option value="Megatelephone">Megatelephone</option>
</select>

<div id="div"></div>
<div id="price"></div>

obviously you'll have to update your json to reflect the accurate data, but for the fist javascipr function, i used this php to get the json:

$arr = array('tnt-phones'=> array ('tarif1', 'tarif2', 'tarif3'),
'Megatelephone'=>array('tarif1MEGA'));

echo json_encode($arr);

Confidence · February 22, 2010

thanks a lot.

looks a lot simpler...i will adjust it to my needs.

Sign In

2-way dropdown from an array

Recommended Posts

Confidence

Link to comment

Share on other sites

sreekuttan

Link to comment

Share on other sites

ohdang888

Link to comment

Share on other sites

Confidence

Link to comment

Share on other sites

ohdang888

Link to comment

Share on other sites

Confidence

Link to comment

Share on other sites

ohdang888

Link to comment

Share on other sites

Confidence

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information