JQuery select menu returning error Uncaught TypeError: undefined is not a function

javascript, jquery

Solution

The Selectmenu widget wasn't added till version 1.11 as the API Documentation lists

version added: 1.11

Include jQuery UI of at least version 1.11

$(document).ready(function () {
    $("#horizonte").selectmenu();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<form action="#">
  <fieldset>
    <label>Escolha:</label>
    <select id="horizonte">
      <option value=1>1 Mês</option>
      <option value=2>2 Meses</option>
      <option value=3 selected="selected">3 Meses</option>
      <option value=6>6 Meses</option>
    </select>
  </fieldset>
</form>

Problem

HTML: ``` <form action="#"> <fieldset> <label>Escolha:</label> <select id="horizonte"> <option value=1>1 Mês</option> <option value=2>2 Meses</option> <option value=3 selected="selected">3 Meses</option> <option value=6>6 Meses</option> </select> </fieldset> </form> ``` JS: ``` $(document).ready(function () { $("#horizonte").selectmenu(); }); ``` Why is the select menu not being initialized correctly? See JSFiddle

Original source