Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Here is an example how you can do it. What you have to do are:</p> <ol> <li>Analyze the code (notice that I use jquery from google's account. You will need to at some point install jquery on your web site and use this one instead of the google's one.</li> <li>Build your <code>fruits</code> array so it looks like the one in the example.</li> </ol> <p>I have prepared page that will show you this working here: <a href="http://jsfiddle.net/7uudp/" rel="nofollow">http://jsfiddle.net/7uudp/</a></p> <p>Below is what it contains. Notice that this example does not use your variables. You will need to use them the way you want/need. I have also defined <code>entry_fruit</code> to show you how to chose the default one to be selected. Hope it will help.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; fruits = [{n:"apple",p:1},{"n":"strawbery",p:3}]; entry_fruit="strawbery"; function build_select(select,list,which) { $.each( list, function(i,v){ var selopt="" ; if ( v.n == which ) selopt="selected" ; $(select).append("&lt;option "+selopt+" value="+i+"&gt;"+v.n+" - $"+v.p+"&lt;/option&gt;"); }) ; } $(document).ready(function(){ build_select($("select[name=fruits]"),fruits,entry_fruit); $("select[name=fruits]").change(function(){ alert("Price is $" + fruits[$(this).val()].p); }) ; }) &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;select name="fruits"&gt;&lt;/select&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload