Databases
StackOverflow2013
Postsdbo
POHelp: Loop for dynamic <option> getting it from an array
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHelp: Loop for dynamic <option> getting it from an array
    text
    copied!<p>I need a help in my code, I cant figure out how to loop values from array and putting them a list/menu. I need to loop the array the roomType and combine it with the rate so it would look some thing like this (e.g. Single Room (980.00)) the values of roomType and rate would be dynamic for every option.</p> <p>please see my code and let me know if my approach are right.</p> <p>Thank You.</p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $(function() { $('#HasCart_TetrisHotel').ready(function() { /* var hotel = HotelQuery('TetrisHotel'); $('#HasCart_TetrisHotel .hotName').append(hotel.name); $('#HasCart_TetrisHotel .hotDesc').append(hotel.desc); $('#HasCart_TetrisHotel .hotMenu').append('&lt;select name="price"&gt;' + $.each(hotel.roomType, function( intIndex, objValue ){ $(this).append( $( "&lt;option value='" + hotel.price + "' &gt;" + hotel.roomType + "&lt;/option&gt;" ) ); }); + '&lt;/select&gt;'); */ var hotel = HotelQuery('TetrisHotel'); $('#HasCart_TetrisHotel .hotName').append(hotel.name); $('#HasCart_TetrisHotel .hotDesc').append(hotel.desc); $('#HasCart_TetrisHotel .hotMenu').append('&lt;select name="price"&gt;' + '&lt;/select&gt;'); var hotel = HotelQuery('ParadiseInn'); $('#HasCart_ParadiseInn .hotName').append(hotel.name); $('#HasCart_ParadiseInn .hotDesc').append(hotel.desc); $('#HasCart_ParadiseInn .hotMenu').append('&lt;select name="price"&gt;' + '&lt;/select&gt;'); var hotel = HotelQuery('JamstoneInn'); $('#HasCart_JamstoneInn .hotName').append(hotel.name); $('#HasCart_JamstoneInn .hotDesc').append(hotel.desc); $('#HasCart_JamstoneInn .hotMenu').append('&lt;select name="price"&gt;' + '&lt;/select&gt;'); }); }); function HotelQuery(HotelName) { switch (HotelName) { case 'TimelessHotel': var strHotelName = 'Timeless Hotel'; var strHotelDesc = 'Hotel Description Timeless Hotel'; var strHotelRate = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00']; var strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person']; ; //end Timeless Hotel case 'ParadiseInn': var strHotelName = 'Paradise Inn'; var strHotelDesc = 'Hotel Description Paradise Inn'; var strHotelRate = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00']; var strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person']; break; //end Paradise Inn case 'TetrisHotel': var strHotelName = 'Tetris Hotel'; var strHotelDesc = 'Hotel Description Tetris Hotel'; var strHotelRate = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00']; var strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person']; break; //end Tetris Hotel case 'JamstoneInn': var strHotelName = 'Jamstone Inn'; var strHotelDesc = 'Hotel Description Jamstone Inn'; var strHotelRate = ['980.00', '1,300.00', '1,600.00', '1,500.00', '1,800.00', '300.00', '150.00', '200.00']; var strHotelRoomType = ['Single Room', 'Delux Room','Twin Room', 'Matrimonial Room', 'Presidential Suites', 'Extra Bed', 'Free Breakfast', 'Extra Person']; break; //end Jamstone Inn } return { name: strHotelName, desc: strHotelDesc, rate: strHotelRate, roomType: strHotelRoomType }; }; }); &lt;/script&gt; &lt;title&gt;hotel query&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="HasCart_TetrisHotel"&gt; &lt;table width="380px" border="1" cellspacing="3" cellpadding="0"&gt; &lt;tr&gt; &lt;td class="hotName"&gt;&lt;/td&gt; &lt;td class="hotDesc"&gt;&amp;nbsp;&lt;/td&gt; &lt;td class="hotMenu"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="HasCart_ParadiseInn"&gt; &lt;table width="380px" border="1" cellspacing="3" cellpadding="0"&gt; &lt;tr&gt; &lt;td class="hotName"&gt;&lt;/td&gt; &lt;td class="hotDesc"&gt;&amp;nbsp;&lt;/td&gt; &lt;td class="hotMenu"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;div id="HasCart_JamstoneInn"&gt; &lt;table width="380px" border="1" cellspacing="3" cellpadding="0"&gt; &lt;tr&gt; &lt;td class="hotName"&gt;&lt;/td&gt; &lt;td class="hotDesc"&gt;&amp;nbsp;&lt;/td&gt; &lt;td class="hotMenu"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; &lt;h2&gt;Something Like This&lt;/h2&gt; &lt;select name="price"&gt; &lt;option value="980.00"&gt;Single Room (980.00)&lt;/option&gt; &lt;option value="1,300.00"&gt;Deluxe Room (1,300.00)&lt;/option&gt; &lt;option value="1,600.00"&gt;Twin Room (1,600.00)&lt;/option&gt; &lt;option value="1,500.00"&gt;Matrimonial Room (1,500.00)&lt;/option&gt; &lt;option value="1,800.00"&gt;Presidential Suites (1,800.00)&lt;/option&gt; &lt;option value="300.00"&gt;Extra Bed (300.00)&lt;/option&gt; &lt;option value="150.00"&gt;Free Breakfast (150.00)&lt;/option&gt; &lt;option value="200.00"&gt;Extra Person (200.00)&lt;/option&gt; &lt;/select&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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