Why script doesn't work

Why script doesn't work

Hello dear jquery people. I'm new in jquery

I have some code:


My index html:

  2. <html>

  4. <head>

  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" >


  9. <link rel="stylesheet" type="text/css" href="test.css"/>

  11. <script type="text/javascript" src="jquery-1.10.1.min.js"></script>


  14. <script type="text/javascript">

  16. $(document).ready(function() {
  18. (function ($) {
  19.    //тут превращаем select в input    
  20.    var id = "test",
  21.        $id = $('#' + id),
  22.        choices = $id.find('option').map(function (n, e) {
  23.            var $e = $(e);
  24.            return {
  25.                id: $e.val(),
  26.                text: $e.text()
  27.            };
  28.        }),
  29.        width = $id.width(),
  30.        realClass = $id.get(0).className,
  31.        realId = $id.get(0).id,

  33.        $input = $('<input>',{width: width});
  34.    $id.after($input);
  35.    $id.hide();
  36.    $id.find('option').remove();
  37.    //превратили

  39.    $input.select2({
  40.        query: function (query) {
  41.            var data = {}, i;
  42.            data.results = [];

  44.            // подтставим то что искали

  46.            if (query.term !== "") {
  47.                data.results.push({
  48.                    id: query.term,
  49.                    text: query.term
  50.                });
  51.            }

  53.            // добавим остальное

  55.            for (i = 0; i < choices.length; i++) {
  56.                if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
  57.            }

  59.            query.callback(data);
  60.        }
  61.    }).on('change',function()
  62.          {   
  63.              var value=$input.val();
  64.              $id.empty();
  65.              $id.append($('<option>').val(value))
  66.              $id.val(value).trigger('change');             
  67.          }
  68.         );
  69. })(jQuery);
  71. });

  73. </script>

  75. </head>

  77. <body>

  79. <select id='test' class="testclass">
  80.     <option value="1">test1</option>
  81.     <option value="2">test2</option>
  82.     <option value="3">test3</option>
  83.     <option value="4">test4</option>
  84. </select>

  86. </body>

  88. </html>

my css:

  2. #test {
  3.     width: 300px;
  4. }

Why it doesn't work?? Can not understand?