Question

我正在尝试创建一个用于选择城镇的下拉菜单。当我选择一个城镇时，它应该标记为已选中。到目前为止，我制作了一个代码，但它不起作用

我的代码如下：

<style>
  #mapedit {
    width: 100%;
    height: 400px;
  }
  .dataTables_scroll
  {
    overflow-y:auto;
    height: 200px; 
    overflow-x: hidden;
  }
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>

下拉

<div class="row">
<div class="col-md-6">
    <div class="form-group">
        <div id="custom-search-input tabbable">
            <br />

            <div class="input-group col-md-12">
                <input id="search" type="text" class="form-control input-lg" placeholder="Search towns" />
            </div>
            <ul class="list-group nav nav-pills nav-stacked" style="height: 200px; overflow-x: hidden; overflow-y: auto">
                <li><a class="reload-towns"><i class="icon-location4"></i> ALL TOWNS</a></li>
                @foreach (var item in towns)
                {
                         <ol id="selectable">
                   <li class="ui-widget-content"><a class="town" data-town="@item"><i class="icon-location3"></i> @item</a></li>
                          </ol>
                 }
             </ul>
        </div>
    </div>
</div>


<script>
    $(function () {
        $("#selectable").selectable();
    });
</script>

当我运行此代码时，它不允许我选择任何城镇甚至只选择一个城镇，并且不会显示城镇名称。

你可以在这里看到：

Answer 1

您是否在网页中添加了jQueryUI？假设你有，那么问题如下：

您的循环将生成ID为“可选”的多个<ol>项...您不能拥有多个具有相同ID的元素，这是无效的HTML，ID必须（显然）是唯一的，否则它们就是唯一的不再是ID了，代码不知道你要引用哪一个，所以它总是选择它找到的第一个（并认为其余的无效，好像它们不存在）。

jQueryUI可选代码也希望在单个<ol>列表上运行，如https://jqueryui.com/selectable/演示中所示。

您只需将<ol>移到Razor @foreach循环之外，因此只会将其添加到页面中一次：

<ol id="selectable">
  @foreach (var item in towns)
  {
    <li class="ui-widget-content"><a class="town" data-town="@item"><i class="icon-location3"></i> @item</a></li>
  }
</ol>

另外，请注意：您不应将列表中的元素放在列表项中也不在列表项中...因此您的外部<ul>也无效 - 您应该放置<ol>真的在<li>内。

Answer 2

您是否从数据库中检索数据？我遇到了同样的问题，它只在我从数据库中读取数据时才起作用，否则它不会

在控制器中

ViewBag.AttributeName = new SelectList(db.TableName, "ByThisAttributeYouMakeTheSearch", "TheAttributeYouWantToShowInDropDownList");

在视图中

@Html.DropDownList("AttributeName ", null, htmlAttributes: new { @class = "form-control" })

使用ASP.NET MVC5（Razor）和jQueryUI Selectable

2 个答案: