Forum Moderators: open
Basically, I need to have a list of items, each with specific properties, and be able to list the items when according to the properties selected by the users through a form or simple link.
E.g.
name=apple, color=red, price=50c
name=pear, color=green, price=60c
name=cherry, color=red, price=20c
If users select list all items with color=red, it will document.write the codes for apple and pear.
Thanks.
I recently did something very similar to this. You can create a multi-dimensional js array (essentially make each row of the array contain one or more arrays.
Something like:
<script type="text/javascript">
<!--
//create global array
var fruit = new Array(3)
fruit[0]=new Array('apple','red','50c')
fruit[1]=new Array('pear','green','70c')
fruit[2]=new Array('cherry','red','90c')
//this function accepts the select object, get the selected index, and searches the array for the color
function pickFruit(obj){
var fruitColor=obj.options[obj.selectedIndex].value
//initialize var for list of fruit
var fruitlist=''
//cycle through fruit array and add the fruit name and price when color is found
for (i=0;i<fruit.length;i++){
fruitlist=fruitlist+(fruit[i][1]==fruitColor?(fruitlist.length>1?'<br />':'')+fruit[i][1]+' - '+fruit[i][2]:'')
}
//write the list of fruits to the fruitList div
document.getElementById('fruitList').innerHTML=fruitlist
}
//-->
</script>
<style type="text/css">
</style>
</head>
<body>
<p>Fruit Color: <select id="selFruit" onchange="pickFruit(this)">
<option value="">pick color</option>
<option value="red">red</option>
<option value="green">green</option>
</select></p>
<div id="fruitList"></div>
The last time I did this, I put the js array in a separate html document that I loaded into an iframe in the main html page.
Hope this helps,
ajkimoto
