CODEWITHSUNDEEP
javascripthtml
user3610827
user3610827

Reputation: 33

Select in js not working

I am very new to js and using selective for the first time. Please be kind. I know this is a very silly doubt but I cant get it work.

I am having the below code to create drop-down list and to have search through it - 

<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link href="../select2-3.4.8/select2.css" rel="stylesheet"/>
    <script src="../select2-3.4.8/select2.js"></script>
    <script>
        $(document).ready(function() { $("#mySelect").select2(); });
    </script>
</head>
</script>
</body>
</html>

    <html>
    <head>
    </head>
    <body>
    <select name="dateRange" id="mySelect" size="1">
           <option value > Select Country </option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
                <option value="Argentina">Argentina</option>
                <option value="Austria">Austria</option>
                <option value="Azerbaijan">Azerbaijan</option>
                <option value="Bahamas">Bahamas</option>
                <option value="Bahrain">Bahrain</option>
                <option value="Guernsey">Guernsey</option>
                <option value="Guinea">Guinea</option>
                <option value="Guinea-bissau">Guinea-bissau</option>
                <option value="Guyana">Guyana</option>
                <option value="Haiti">Haiti</option>
                <option value="Heard Island">Heard Island</option>
                <option value="Holy See (Vatican City State)">Holy See</option>
                <option value="Botswana">Botswana</option>
                <option value="Bouvet Island">Bouvet Island</option>
                <option value="Montserrat">Montserrat</option>
                <option value="Morocco">Morocco</option>
                <option value="Mozambique">Mozambique</option>
                <option value="Myanmar">Myanmar</option>
                <option value="Namibia">Namibia</option>
                <option value="Nauru">Nauru</option>
                <option value="Nepal">Nepal</option>
                <option value="Netherlands">Netherlands</option>
                <option value="New Caledonia">New Caledonia</option>
            <option value="Puerto Rico">Puerto Rico</option>
                <option value="Qatar">Qatar</option>
                <option value="Reunion">Reunion</option>
                <option value="Romania">Romania</option>
                <option value="Russian Federation">Russian Federation</option>
                <option value="Rwanda">Rwanda</option>
                <option value="Saint Barthelemy">Saint Barthelemy</option>
                <option value="Saint Helena">Saint Helena</option>
                <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                <option value="Saint Lucia">Saint Lucia</option>
                <option value="Saint Martin (French part)">Saint Martin (French part)</option>
    </select> 
    </body>
    </html>

the code does not seems to work. what is that I am doing wrong here ?

Upvotes: 0

Views: 74

Answers (2)

SeanCannon
SeanCannon

Reputation: 77966

You have two separate html documents there and your head and body tags are whack. Also your jQuery selector is wrong.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link href="../select2-3.4.8/select2.css" rel="stylesheet"/>
    <script src="../select2-3.4.8/select2.js"></script>
    <script>
        $(document).ready(function() { $("#mySelect").select2(); });
    </script>

</head>
<body>
    <select name="dateRange" id="mySelect" size="1">
           <option value > Select Country </option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
                <option value="Argentina">Argentina</option>
                <option value="Austria">Austria</option>
                <option value="Azerbaijan">Azerbaijan</option>
                <option value="Bahamas">Bahamas</option>
                <option value="Bahrain">Bahrain</option>
                <option value="Guernsey">Guernsey</option>
                <option value="Guinea">Guinea</option>
                <option value="Guinea-bissau">Guinea-bissau</option>
                <option value="Guyana">Guyana</option>
                <option value="Haiti">Haiti</option>
                <option value="Heard Island">Heard Island</option>
                <option value="Holy See (Vatican City State)">Holy See</option>
                <option value="Botswana">Botswana</option>
                <option value="Bouvet Island">Bouvet Island</option>
                <option value="Montserrat">Montserrat</option>
                <option value="Morocco">Morocco</option>
                <option value="Mozambique">Mozambique</option>
                <option value="Myanmar">Myanmar</option>
                <option value="Namibia">Namibia</option>
                <option value="Nauru">Nauru</option>
                <option value="Nepal">Nepal</option>
                <option value="Netherlands">Netherlands</option>
                <option value="New Caledonia">New Caledonia</option>
            <option value="Puerto Rico">Puerto Rico</option>
                <option value="Qatar">Qatar</option>
                <option value="Reunion">Reunion</option>
                <option value="Romania">Romania</option>
                <option value="Russian Federation">Russian Federation</option>
                <option value="Rwanda">Rwanda</option>
                <option value="Saint Barthelemy">Saint Barthelemy</option>
                <option value="Saint Helena">Saint Helena</option>
                <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                <option value="Saint Lucia">Saint Lucia</option>
                <option value="Saint Martin (French part)">Saint Martin (French part)</option>
    </select> 
    </body>
    </html>

Upvotes: 3

Amit Joki
Amit Joki

Reputation: 59232

$("mySelect").select2(); should be:

$("#mySelect").select2();

You should use the prefix of # to target an element with a particular id.

And, your html isn't nice.

It should be:

<html>
  <head>
    <title>Title here</title>
    script tags...
  </head>
  <body>
     ... select..
  </body>
</html>

Upvotes: 1

Related Questions