Create a simple html page with a form.

Form elements:

- dropdown 1 options: red, green, blue

- dropdown 2 options: rectangle, circle

- button “Add”

1. When user clicks “add”, the appropriate figure should appear on the page.

2. User should be able to remove any figure

3. Add clear button, which clears all figures on the page

should use jQuery.

how to do it ?

I'd try something like this: 

2. HTML
3.  <div id="main">
4.     <form action="#">
5.       <ul>
6.         <li>
7.           <select id="color" name="color">
8.             <option value="red">red</option>
9.             <option value="green">green</option>
10.             <option value="blue">blue</option>
11.           </select>
12.         </li>
13.         <li>
14.           <select id="type" name="type">
15.             <option value="rectangle">rectangle</option>
16.             <option value="circle">circle</option>
17.           </select>
18.           <br>
19.         </li>
20.         <li>
21.           <input type="submit" onclick="show_fig();">
22.         </li>
23.       </ul>
24.     </form>
25.     <div id="rectangle_div_id"></div>
26.     <div id="circle_div_id"></div>
27.   </div>
28.   <script type="text/javascript" src='js/jQuery.js'></script>
29.   <script type="text/javascript" src='js/showFig.js'></script>

CSS:

2. body {
3.   font: 16px Verdana, Arial, Helvetica;
4.   color: #333;
5. }
6. #main {
7.   margin: 0 auto;
8.   position: relative;
9.   width: 250px;
10.   background-color: lightgreen;
11.   height: 300px;
12.   padding: 10px 45px;
13. }
14. form {
15.   width: 240px;
16.   margin: 0;
17.   padding: 0;
18. }
19. 
    
20. form ul {
21.   margin: 5px auto;
22.   padding: 0;
23.   width: 100px;
24. }
25. form li {
26.   list-style: none;
27.   margin: 10px 0;
28.   padding: 0;
29.   width: 100px;
30. 
    
31. }
32. 
    
33. form select {
34.   border-radius: 5px;
35.   padding: 0 ;
36.   width: 100px;
37. }
38. 
    
39. form input {
40.   border-radius: 5px;
41.   width: 100px;
42.   height: 26px;
43.   font-weight: bold;
44. }
45. 
    
46. #rectangle_div_id {
47.   width: 50px; 
48.   height: 50px;
49.   background-color: black;
50. }
51. 
    
52. #green_rectangle {
53.   width: 50px; 
54.   height: 50px;
55. }
56. 
    
57. #blue_rectangle {
58.   width: 50px; 
59.   height: 50px;
60. }
61. 
    
62. #red_circle {
63.   width: 50px; 
64.   height: 50px; 
65.   border-radius: 50%
66. }
67. 
    
68. #green_circle {
69.   width: 50px; 
70.   height: 50px; 
71.   border-radius: 50%
72. }
73. 
    
74. #blue_circle {
75.   width: 50px; 
76.   height: 50px; 
77.   border-radius: 50%
78. }
79. 
    
80. #circle_div_id, #rectangle_div_id, #blue_rectangle, #red_circle, #green_circle, #blue_circle {
81.   display: none;
82. }

and js:

2. $(document).ready(function() {
3.   if $('select:option[0]').selected==true {
4.     $('#rectangle_div_id').css('display','block');
5.   }
6. });

but it doesn't works.

I can't write condition like "if select.option.first_value.selected==true, then rectangle_div.show 

else if select.option.second_value.selected==true then circle_div.show"