javascript - jQuery UI 选择菜单不是 "selecting"

Question

我目前正在尝试使用 jQuery-UI 有一个有效的选择菜单。我的选择看起来不错，但当我尝试选择一个值时，没有任何变化:选择保持打开状态，并且值在悬停时发生变化，而不是在单击时发生变化。我完全不明白发生了什么。

我正在使用 jQuery 1.10.2 和 jQuery-UI 1.11.4。

这是我的(渲染的)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>

这是我的 javascript 代码(在 $(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");

有人知道为什么它不起作用吗？

谢谢，祝你有美好的一天

Answer 1

确实谢谢@blgt，jquery-ui.struct.min.css 显然丢失了。愚蠢的错误:(