Question about my code

#1

So I thought I was doing everything right but nothing is working… Please help.

<!doctype html>

Home 
<header >
	<h1>Test The Gifting Machine!!!</h1>
	<div id="logo">
	<img src="rough.png" alt="logo" width="80" length="80">
			</nav>
			<nav>
        <div class="wrapper">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="test.html" class="active">Test</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </nav>
</header>

<form action="/action_page.php" method="get">
	
       <fieldset>
      <legend>Selecting elements</legend>
         <label></label>
         <select class="select2" name="hobbies[]" multiple="multiple">
           <option value = "4" title="acting">Acting</option>
           <option value = "">Archery</option>
		   <option value = "">Art</option>
           <option value = "">Astronomy</option>
           <option value = "">Backpacking</option>
		   <option value = "">Baking</option>
           <option value = "">Baseball</option>
           <option value = "">Basketball</option>
		   <option value = "">Biking</option>
		   <option value = "">Boating</option>
		   <option value = "">Bowling</option>
           <option value = "">Building</option>
           <option value = "">Camping</option>
           <option value = "">Card Games</option>
		   <option value = "">Climbing</option>
		   <option value = "">Collecting</option>
           <option value = "">Coloring</option>
           <option value = "">Computers</option>
           <option value = "">Cooking</option>
		   <option value = "">Crafts</option>
           <option value = "">Dance</option>
		   <option value = "">Decorating</option>
		   <option value = "">Diving</option>
           <option value = "">Driving</option>
		   <option value = "">Fashion</option>
           <option value = "">Fishing</option>
		   <option value = "">Football</option>
           <option value = "">Gaming</option>
           <option value = "">Gardening</option>
           <option value = "">Hiking</option>
		   <option value = "">Horses</option>
		   <option value = "">Hunting</option>
		   <option value = "">Magic</option>
		   <option value = "">Motorsports</option>
		   <option value = "">Music</option>
		   <option value = "">Oragami</option>
		   <option value = "">Paintball</option>
		   <option value = "">Painting</option>
		   <option value = "">Photography</option>
		   <option value = "">Programming</option>
		   <option value = "">Puzzles</option>
		   <option value = "">Reading</option>
		   <option value = "">Rugby</option>
		   <option value = "">Running</option>
		   <option value = "">Sailing</option>
		   <option value = "">Scrapbooking</option>
		   <option value = "">Sewing</option>
		   <option value = "">Skating</option>
		   <option value = "">Skiing</option>
		   <option value = "">Snowboarding</option>
		   <option value = "">Soccer</option>
		   <option value = "">Surfing</option>
		   <option value = "">Swimming</option>
		   <option value = "">Tech</option>
		   <option value = "">Tennis</option>
		   <option value = "">Travel</option>
		   <option value = "">Woodworking</option>
		   <option value = "">Writing</option>
         </select>
   </fieldset>

</form>
#2

I don’t know if you just forgot to include your JavaScript code, or if you thought it wasn’t important, but it’s probably the key to understanding your problem. Also, you didn’t explain exactly what the problem is. I’m guessing that the Select2 widget is not displaying–you’re just seeing the plain HTML <select>. Is that correct?

One problem I see in your HTML is that your <option>s don’t have unique values. Select2 requires that they do. So either remove the value attributes entirely or provide a unique, non-empty value for each one. If that current resolve your problem then please post your JavaScript code so I can troubleshoot further. And please provide a concise description of the problem you’re experiencing.

#3

So I updated it and I have this

<!doctype html>

Home 
<header >
	<h1>Test The Gifting Machine!!!</h1>
	<div id="logo">
	<img src="rough.png" alt="logo" width="80" length="80">
			</nav>
			<nav>
        <div class="wrapper">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="test.html" class="active">Test</a></li>
                <li><a href="contact.html">Contact</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </nav>
</header>

<form action="/action_page.php" method="get">
	
       <fieldset>
      <legend>Selecting elements</legend>
         <select class="select2" name="hobbies[]" multiple="multiple">
           <option value = "h1">Acting</option>
           <option value = "h2">Archery</option>
		   <option value = "h3">Art</option>
           <option value = "h4">Astronomy</option>
           <option value = "h5">Backpacking</option>
		   <option value = "h6">Baking</option>
           <option value = "h7">Baseball</option>
           <option value = "h8">Basketball</option>
		   <option value = "h9">Biking</option>
		   <option value = "h10">Boating</option>
		   <option value = "h11">Bowling</option>
           <option value = "h12">Building</option>
           <option value = "h13">Camping</option>
           <option value = "h14">Card Games</option>
		   <option value = "h15">Climbing</option>
		   <option value = "h16">Collecting</option>
           <option value = "h17">Coloring</option>
           <option value = "h18">Computers</option>
           <option value = "h19">Cooking</option>
		   <option value = "h20">Crafts</option>
           <option value = "h21">Dance</option>
		   <option value = "h22">Decorating</option>
		   <option value = "h23">Diving</option>
           <option value = "h24">Driving</option>
		   <option value = "h25">Fashion</option>
           <option value = "h26">Fishing</option>
		   <option value = "h27">Football</option>
           <option value = "h28">Gaming</option>
           <option value = "h29">Gardening</option>
           <option value = "h30">Hiking</option>
		   <option value = "h31">Horses</option>
		   <option value = "h32">Hunting</option>
		   <option value = "h33">Magic</option>
		   <option value = "h34">Motorsports</option>
		   <option value = "h35">Music</option>
		   <option value = "h36">Oragami</option>
		   <option value = "h37">Paintball</option>
		   <option value = "h38">Painting</option>
		   <option value = "h39">Photography</option>
		   <option value = "h40">Programming</option>
		   <option value = "h41">Puzzles</option>
		   <option value = "h42">Reading</option>
		   <option value = "h43">Rugby</option>
		   <option value = "h44">Running</option>
		   <option value = "h45">Sailing</option>
		   <option value = "h46">Scrapbooking</option>
		   <option value = "h47">Sewing</option>
		   <option value = "h48">Skating</option>
		   <option value = "h49">Skiing</option>
		   <option value = "h50">Snowboarding</option>
		   <option value = "h51">Soccer</option>
		   <option value = "h52">Surfing</option>
		   <option value = "h53">Swimming</option>
		   <option value = "h54">Tech</option>
		   <option value = "h55">Tennis</option>
		   <option value = "h56">Travel</option>
		   <option value = "h57">Woodworking</option>
		   <option value = "h58">Writing</option>
         </select>
		 <br>
		 <br>
		   <input type="radio" name="gender" value="male" checked><h5 class="formtext"> Male</h5><br>
		   <input type="radio" name="gender" value="female"><h5 class="formtext"> Female</h5><br>

		   <br>
		   <select>
		   <option value="none">Select Age</option>
		   <option value="5">5</option>
		   <option value="6">6</option>
		   <option value="7">7</option>
		   <option value="8">8</option>
		   <option value="9">9</option>
		   <option value="10">10</option>
		   <option value="11">11</option>
		   <option value="12">12</option>
		   <option value="13">13</option>
		   <option value="14">14</option>
		   <option value="15">15</option>
		   <option value="16">16</option>
		   <option value="17">17</option>
		   <option value="18">18</option>
		   <option value="19">19</option>
		   <option value="20">20</option>
		   <option value="21">21</option>
		   <option value="22">22</option>
		   <option value="23">23</option>
		   <option value="24">24</option>
		   <option value="25">25</option>
		   <option value="26">26</option>
		   <option value="27">27</option>
		   <option value="28">28</option>
		   <option value="29">29</option>
		   <option value="30">30</option>
		   <option value="31">31</option>
		   <option value="32">32</option>
		   <option value="33">33</option>
		   <option value="34">34</option>
		   <option value="35">35</option>
		   <option value="36">36</option>
		   <option value="37">37</option>
		   <option value="38">38</option>
		   <option value="39">39</option>
		   <option value="40">40</option>
		   <option value="41">41</option>
		   <option value="42">42</option>
		   <option value="43">43</option>
		   <option value="44">44</option>
		   <option value="45">45</option>
		   <option value="46">46</option>
		   <option value="47">47</option>
		   <option value="48">48</option>
		   <option value="49">49</option>
		   <option value="50">50</option>
		   <option value="51">51</option>
		   <option value="52">52</option>
		   <option value="53">53</option>
		   <option value="54">54</option>
		   <option value="55">55</option>
		   <option value="56">56</option>
		   <option value="57">57</option>
		   <option value="58">58</option>
		   <option value="59">59</option>
		   <option value="60">60</option>
		   <option value="61">61</option>
		   <option value="62">62</option>
		   <option value="63">63</option>
		   <option value="64">64</option>
		   <option value="65">65</option>
		   <option value="66">66</option>
		   <option value="67">67</option>
		   <option value="68">68</option>
		   <option value="69">69</option>
		   <option value="70">70</option>
		 </select><br>
		 
   </fieldset>

</form>
#4

I do not know why it didn’t put head on but this is the head

Home
#5

I still can’t see your JavaScript (I assume it’s in the head, but that’s not displaying for some reason). Can you put your code on codepen.io or jsfiddle.net?

#6

https://codepen.io/tregt15/pen/KjaXym

#7

OK, I see the problem. The Developer Tools (F12) JavaScript Console is your friend (it usually is, and it should be your first stop when debugging your application). In this case, the console shows the following error: ReferenceError: $ is not defined, and the hyperlink KjaXym:152:1 indicates this statement is where the error occurs: $(document).ready(function() {.

The $ variable is what jQuery calls itself when you’ve loaded it. Except that you haven’t loaded jQuery; you’ve only loaded Select2:

<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/select2/4.0.3/js/select2.min.js"></script>

You need to load jQuery before you load Select2.

#8

Ok awesome it works now and thank you so much for your help.

#9

Glad I could help/ Good luck with your project!