Please help me to change this textbox to dropdownlist

Please help me to change this textbox to dropdownlist

Hello Everyone,

Please help me to change the textbox to dropdownlist with the option: (Condominium, Condotel, Condormitel, House and Lot)

Thank you very, very, very much!!!!!!................

       
    
        
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. 
        
  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 
        
  3.  <head>
    4. 
        
  4.  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    5. 
        
  5.  <title>Properties</title>
    6. 
        
  6.  <style>
    7. 
        
  7.  body {
    8. 
        
  8.  background:#fff;
    9. 
        
  9.  color:#000;
    10. 
        
  10.  font:75%/1.5em Arial, Helvetica, "DejaVu Sans", "Liberation sans", "Bitstream Vera Sans", sans-serif;
    11. 
        
  11.  }
    12. 
        
  12.  #wrap {
    13. 
        
  13.  width: 610px;
    14. 
        
  14.  position: relative;
    15. 
        
  15.  left: 50%;
    16. 
        
  16.  margin-left: -600px;
    17. 
        
  17.  }
    18. 
        
  18.  #header {
    19. 
        
  19.  position:relative;
    20. 
        
  20.  line-height:1em;
    21. 
        
  21.  }
    22. 
        
  22.  input {
    23. 
        
  23.  border:1px solid #ccc;
    24. 
        
  24.  border-bottom-color:#eee;
    25. 
        
  25.  border-right-color:#eee;
    26. 
        
  26.  box-sizing:border-box;
    27. 
        
  27.  -moz-box-sizing:border-box;
    28. 
        
  28.  -webkit-box-sizing:border-box;
    29. 
        
  29.  -ms-box-sizing:border-box;
    30. 
        
  30.  font-size:1em;
    31. 
        
  31.  height:2.25em;
    32. 
        
  32.  *height:1.5em;
    33. 
        
  33.  line-height:1.5em;
    34. 
        
  34.  padding:0.29em 0;
    35. 
        
  35.  width:100%;
    36. 
        
  36.  margin:0 0 0.75em;
    37. 
        
  37.  }
    38. 
        
  38.  .filterform {
    39. 
        
  39.  width:220px;
    40. 
        
  40.  font-size:12px;
    41. 
        
  41.  display:block;
    42. 
        
  42.  }
    43. 
        
  43.  .filterform input {
    44. 
        
  44.  -moz-border-radius:5px;
    45. 
        
  45.  border-radius:5px;
    46. 
        
  46.  -webkit-border-radius:5px;
    47. 
        
  47.  }
    48. 
        
  48.  .entry {
    49. 
        
  49.  margin: 0 0 0 0;
    50. 
        
  50.  padding: 3px 0;
    51. 
        
  51.  border-top: solid thin #666;
    52. 
        
  52.  border-bottom: solid thin #222;
    53. 
        
  53.  height:190px;
    54. 
        
  54.  overflow: hidden;
    55. 
        
  55.  text-overflow: ellipsis;
    56. 
        
  56.  }
    57. 
        
  57.  .movieTitle {
    58. 
        
  58.  font-size:14px;
    59. 
        
  59.  color:black;
    60. 
        
  60.  font-weight: bold;
    61. 
        
  61.  margin-bottom: 1px;
    62. 
        
  62.  color:#000;
    63. 
        
  63.  }
    64. 
        
  64.  .field {
    65. 
        
  65.  font-weight:bold;
    66. 
        
  66.  color:#777;
    67. 
        
  67.  }
    68. 
        
  68.  .info {
    69. 
        
  69.  color:#000;
    70. 
        
  70.  }
    71. 
        
  71.  
    72. 
        
  72.  </style>
    73. 
        
  73.  <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    74. 
        
  74.  <script>
    75. 
        
  75.  (function ($) {
    76. 
        
  76.  jQuery.expr[':'].Contains = function (a, i, m) {
    77. 
        
  77.  return(a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    78. 
        
  78.  };
    79. 
        
  79.  function listFilter(header, list) {
    80. 
        
  80.  var form = $("<form>").attr({
    81. 
        
  81.  "class": "filterform",
    82. 
        
  82.  "action": "#"
    83. 
        
  83.  }),
    84. 
        
  84.  input = $("<input>").attr({
    85. 
        
  85.  "class": "filterinput",
    86. 
        
  86.  "type": "text"
    87. 
        
  87.  });
    88. 
        
  88.  $(form).append(input).appendTo(header);
    89. 
        
  89.  $(input).change(function () {
    90. 
        
  90.  var filter = $(this).val();
    91. 
        
  91.  if(filter) {
    92. 
        
  92.  $(list).find(".movieTitle:not(:Contains(" + filter + "))").parent().slideUp();
    93. 
        
  93.  $(list).find(".movieTitle:Contains(" + filter + ")").parent().slideDown();
    94. 
        
  94.  } else {
    95. 
        
  95.  $(list).find(".entry").slideDown();
    96. 
        
  96.  }
    97. 
        
  97.  return false;
    98. 
        
  98.  }).keyup(function () {
    99. 
        
  99.  $(this).change();
    100. 
        
  100.  });
    101. 
        
  101.  }
    102. 
        
  102.  $(function () {
    103. 
        
  103.  listFilter($("#header"), $("#list"));
    104. 
        
  104.  });
    105. 
        
  105.  }(jQuery));
    106. 
        
  106.  </script>
    107. 
        
  107.  </head>
    108. 
        
  108.  <body>
    109. 
        
  109.  <div id="wrap">
    110. 
        
  110.  <h1 id="header">Search for Properties</h1> 
    111. 
        
  111.  <div id="list">
    112. 
        
  112.  <div class="entry">
    113. 
        
  113.  <img src="http://static.wix.com/media/33d072_2cd7b9254b192ba7f1d9348b926b5765.png_srz_230_170_75_22_0.50_1.20_0.00_png_srz"
    114. 
        
  114.  alt="Hotel 101" width="150" height="100">
    115. 
        
  115.  <img src="http://static.wix.com/media/33d072_cbb7832d5fbeda99fd2049dfe0a1a5c0.png_srz_230_170_75_22_0.50_1.20_0.00_png_srz"
    116. 
        
  116.  alt="Hotel 101" width="150" height="100">
    117. 
        
  117.  <img src="http://static.wix.com/media/33d072_d1c463d343e8b990ddc5316b89fa5000.png_srz_215_170_75_22_0.50_1.20_0.00_png_srz"
    118. 
        
  118.  alt="Hotel 101" width="150" height="100">
    119. 
        
  119.  <img src="http://static.wix.com/media/33d072_4400f7d68f4e63c40cae5f7fb0153820.png_srz_230_165_75_22_0.50_1.20_0.00_png_srz"
    120. 
        
  120.  alt="Hotel 101" width="150" height="100">
    121. 
        
  121.  <div class="info"> <b><font size = 4> Hotel 101</font></b>
    122. 
        
  122.  </div>
    123. 
        
  123.  <div class="movieTitle"><span class="field">Property Type:</span>Condotel</div>
    124. 
        
  124.  <div class="info"><span class="field">Price:</span> 3,188,000 Php</div>
    125. 
        
  125.  <div class="info"><span class="field">Location:</span>EDSA Extension corner Macapagal Boulevard,
    126. 
        
  126.  Pasay City, Metro Manila</div>
    127. 
        
  127.  <div class="info"><span class="field">Developer:</span> Hotel 101 Manila</div>
    128. 
        
  128.  </div>
    129. 
        
  129.  <div class="entry">
    130. 
        
  130.  <img src="http://static.wix.com/media/33d072_b57abfc25faf8042f02245701bdfd443.jpg_srz_215_155_75_22_0.50_1.20_0.00_jpg_srz"
    131. 
        
  131.  alt="Laureano di Trevi" width="150" height="100">
    132. 
        
  132.  <img src="http://static.wix.com/media/33d072_cdc132a8e56f245126ae4f50c9a2309d.jpg_srz_225_165_75_22_0.50_1.20_0.00_jpg_srz"
    133. 
        
  133.  alt="Laureano di Trevi" width="150" height="100">
    134. 
        
  134.  <img src="http://static.wix.com/media/33d072_e998fd67369ae1f408c78c487f0072de.jpg_srz_210_170_75_22_0.50_1.20_0.00_jpg_srz"
    135. 
        
  135.  alt="Laureano di Trevi" width="150" height="100">
    136. 
        
  136.  <img src="http://static.wix.com/media/33d072_19ea7b39657812b316a0e2b88d818b07.jpg_srz_225_165_75_22_0.50_1.20_0.00_jpg_srz"
    137. 
        
  137.  alt="Laureano di Trevi" width="150" height="100">
    138. 
        
  138.  <div class="info"> <b><font size = 4>Laureano di Trevi</font></b>
    139. 
        
  139.  </div>
    140. 
        
  140.  <div class="movieTitle"><span class="field">Property Type:</span>Condominium</div>
    141. 
        
  141.  <div class="info"><span class="field">Price:</span> 2,531,990 Php</div>
    142. 
        
  142.  <div class="info"><span class="field">Location:</span>2216 Calle Estacion, Chino Roces Ave.,
    143. 
        
  143.  Makati City, Metro Manila</div>
    144. 
        
  144.  <div class="info"><span class="field">Developer:</span> Vistaland and Lifescapes, Inc.</div>
    145. 
        
  145.  </div>
    146. 
        
  146.  <div class="entry">
    147. 
        
  147.  <img src="http://static.wix.com/media/33d072_3fa74890c7d330189d99ab80124a9537.jpg_srz_175_165_75_22_0.50_1.20_0.00_jpg_srz"
    148. 
        
  148.  alt="Space Manila" width="150" height="100">
    149. 
        
  149.  <img src="http://static.wix.com/media/33d072_d9899a2de72ee98ce9a273f43315ed84.jpg_srz_225_163_75_22_0.50_1.20_0.00_jpg_srz"
    150. 
        
  150.  alt="Space Manila" width="150" height="100">
    151. 
        
  151.  <img src="http://static.wix.com/media/33d072_13ef7990f6c3e854811f84294d689fc9.jpg_srz_210_165_75_22_0.50_1.20_0.00_jpg_srz"
    152. 
        
  152.  alt="Space Manila" width="150" height="100">
    153. 
        
  153.  <img src="http://static.wix.com/media/33d072_5cd998c47c2cdf71c01dddc5749bd818.jpg_srz_225_163_75_22_0.50_1.20_0.00_jpg_srz"
    154. 
        
  154.  alt="Space Manila" width="150" height="100">
    155. 
        
  155.  <div class="info"> <b><font size = 4>Space manila</font></b>
    156. 
        
  156.  </div>
    157. 
        
  157.  <div class="movieTitle"><span class="field">Property Type:</span>Condormitel</div>
    158. 
        
  158.  <div class="info"><span class="field">Price:</span> 1,356,000 Php</div>
    159. 
        
  159.  <div class="info"><span class="field">Location:</span>Near Adamson University, Manila, Metro
    160. 
        
  160.  Manila</div>
    161. 
        
  161.  <div class="info"><span class="field">Developer:</span> Major Homes</div>
    162. 
        
  162.  </div>
    163. 
        
  163.  </div>
    164. 
        
  164.  </body>
    165. 
        

    166. 
        
  166. </html>
    167. 
       

       

        [moderator edited]