Выберите элемент с помощью ASP.NET MVC5 (Razor) и jQueryUI Selectable - PullRequest
Новая
       43

Выберите элемент с помощью ASP.NET MVC5 (Razor) и jQueryUI Selectable

0 голосов
/ 03 мая 2018

Я пытаюсь создать выпадающее меню для выбора города. Когда я выбираю город, он должен быть помечен как выбранный. Пока я делаю код, но он не работает

Мой код, как показано ниже: 

<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>

Когда я запускаю этот код, он не позволяет мне выбрать какой-либо город или даже только один город, а также названия городов не отображаются.

Вы можете увидеть это здесь:

enter image description here

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

Вы извлекаете данные из базы данных? У меня была та же проблема, и она работала только при чтении данных из базы данных, иначе это не

В контроллере 

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

На виду 

@Html.DropDownList("AttributeName ", null, htmlAttributes: new { @class = "form-control" })
0 голосов
/ 03 мая 2018

Включили ли вы jQueryUI на своей странице? Если предположить, что у вас есть, то проблема заключается в следующем:

Ваш цикл будет производить несколько <ol> элементов с идентификатором «выбираемый» ... вы не можете иметь несколько элементов с одинаковым идентификатором, это недопустимый HTML, идентификаторы должны (очевидно) быть уникальными, иначе они не являются идентификаторами больше, и код не может знать, на кого вы хотите сослаться, поэтому он всегда выбирает первый, который находит (и считает остальные недействительными, как если бы они не существовали).

Кроме того, выбираемый код 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> действительно.

...