jQuery UI selectmenu not "selecting"

Question

I am currently trying to have a working selectmenu using jQuery-UI. My select looks fine but when I try to select a value, nothing changes: the select stays opened and the value change on hover and not on click. I don't understand at all what is hapening.

I'm using jQuery 1.10.2 and jQuery-UI 1.11.4.

Here is my (rendered) HTML:

<div class="form-group">
                          <table class="table m-full-background-color-table">
                            <thead>
                              <tr>
                                <th></th>
                                <th>Disposition</th>
                                <th>Participants</th>
                              </tr>
                            </thead>
                            <tbody id="sallesConteneur">
                              <tr class="header-spacing">
                                <td></td>
                              </tr>
                              <tr data-indice="1">
                                <td>Salle de réunion 1</td>
                                <td>
                                  <select class="form-control" name="salles[1][disposition]" id="roomTypeSelect" style="display: none;">
                                    <option value="En U" style="padding-left:30px;background-image: url('/images/capacity_icons/IconesBizMeeting_14.gif');">En U</option>
                                    <option value="Banquet">Banquet</option>
                                    <option value="Cocktail">Cocktail</option>
                                    <option selected="selected" value="Theatre">Theatre</option>
                                    <option value="Board">Board</option>
                                    <option value="Conference">Conférence</option>
                                    <option value="Class">Classe</option>
                                  </select><span class="ui-selectmenu-button ui-widget ui-state-default ui-corner-all" tabindex="0" id="roomTypeSelect-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="roomTypeSelect-menu" aria-haspopup="true" style="width: 210px;" aria-activedescendant="ui-id-7" aria-labelledby="ui-id-7" aria-disabled="false"><span class="ui-icon ui-icon-triangle-1-s"></span><span class="ui-selectmenu-text">Classe</span></span>
                                </td>
                                <td>
                                  <input type="number" min="0" value="13" class="form-control input-sm" name="salles[1][participants]">
                                </td>
                              </tr>

                            </tbody>
                          </table>

                          <span><a class="btn btn-primary pull-right" id="newSalle" alt="" href="#"><i class="fa fa-plus"></i> Ajouter une salle</a><span class="light-text small-text pull-right l-tip">Vous souhaitez plusieurs salles ? Cliquez sur le bouton ci-contre</span></span>
                        </div>

And here is my javascript code ( in a $(function(){ ) :

$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
  _renderItem: function( ul, item ) {
    var li = $( "<li>", { text: item.label } );

    if ( item.disabled ) {
      li.addClass( "ui-state-disabled" );
    }

    $( "<span>", {
      style: item.element.attr( "data-style" ),
      "class": "ui-icon " + item.element.attr( "data-class" )
    })
      .appendTo( li );

    return li.appendTo( ul );
  }
});
$("#roomTypeSelect").iconselectmenu().iconselectmenu("menuWidget").addClass("ui-menu-icons");

Does anyone have any idea of why it doesn't work ?

Thanks, have a nice day

Answer 1

Indeed thank you @blgt, jquery-ui.structure.min.css was apparently missing. Dumb error :(