Блог

Я пытаюсь реализовать выпадающий список / список выбора в JS, и вот что я написал:

 //some js code

#startJobDialog (A dialog box in JS)

// js code


var markUp = "<ul id='topMenu' class='ui-menu ui-widget ui-widget-content' role='menu' tabindex='0' style='display: table; width: 220px; margin: 0 auto;'>rn";
  markUp  = "t<li data-menu='job' class='ui-menu-item' id='ui-id-2' tabindex='2' role'=menuitem' style='display: inline-block; width: 220px; vertical-align: top; horizontal-align: center'><span class='ui-icon ui-icon-triangle-1-s'></span>rn";
  markUp  = "<ul class='subMenu ui-menu ui-widget ui-widget-content' id='jobMenu' role='menu' tabindex='-1' style='display: block; padding-left: 40px;'><li class='ui-menu-item' id='ui-id-5' tabindex='0' role='menuitem'><br></br>-->Tier1 VAE<br></br></li > <li class='ui-menu-item' id='ui-id-6' tabindex='1' role='menuitem'>-->Tier1 Non-VAE<br></br></li><li class='ui-menu-item' id='ui-id-7' tabindex='2' role='menuitem'>-->Tier2<br></br></li><li class='ui-menu-item' id='ui-id-7' tabindex='3' role='menuitem'>-->Tier1 Smart Conversion<br></br></li></ul></li>rn";

  $("#startJobDialog").html(markUp);

...
 

Согласно приведенному выше коду, я устанавливаю значение HTML markup #startJobDialog , и он выдает мне следующий вывод:

Как вы можете видеть, всякий раз, когда я выбираю элемент в списке меню, selection checkmark он находится под выбранным элементом, но я действительно хочу, чтобы он был рядом с выбранным элементом. Похоже, ширина правильная, и я попытался ее настроить. Я не эксперт по JS, я в начальных упражнениях — любые идеи о разных классах, стилях и других параметрах в отношении <ul>, <li> и т. Д. помогло бы, и я действительно хочу, чтобы этот выпадающий список выглядел лучше, чем сейчас.

Как установить этот флажок в нужном / моем желаемом положении в JS и улучшить внешний вид списка выбора?

Мое предложение состояло бы в том, чтобы удалить css из вашей разметки и поместить их в файл css.

Оттуда попробуйте абсолютное позиционирование ваших элементов.

В этом посте я привел пример фрагмента вашего кода, просто чтобы посмотреть и поиграть с ним. Вы можете видеть <br> , что к тому, что, как я бы предположил, является выбранным по умолчанию элементом, добавляется множество «s». Я не вижу, где добавляется галочка.

Если вы предоставите фрагмент текста, я смогу помочь вам в дальнейшем. Но плавающее или абсолютное позиционирование может быть одним из вариантов. Или вы можете использовать псевдоселекторы ::before или ::after .

Для того, чтобы я был более конкретным, мне нужно было бы увидеть точную разметку, которая генерируется.

 var markUp = "<ul id='topMenu' class='ui-menu ui-widget ui-widget-content' role='menu' tabindex='0' style='display: table; width: 220px; margin: 0 auto;'>rn";
  markUp  = "t<li data-menu='job' class='ui-menu-item' id='ui-id-2' tabindex='2' role'=menuitem' style='display: inline-block; width: 220px; vertical-align: top; horizontal-align: center'><span class='ui-icon ui-icon-triangle-1-s'></span>rn";
  markUp  = "<ul class='subMenu ui-menu ui-widget ui-widget-content' id='jobMenu' role='menu' tabindex='-1' style='display: block; padding-left: 40px;'><li class='ui-menu-item' id='ui-id-5' tabindex='0' role='menuitem'><br></br>-->Tier1 VAE<br></br></li > <li class='ui-menu-item' id='ui-id-6' tabindex='1' role='menuitem'>-->Tier1 Non-VAE<br></br></li><li class='ui-menu-item' id='ui-id-7' tabindex='2' role='menuitem'>-->Tier2<br></br></li><li class='ui-menu-item' id='ui-id-7' tabindex='3' role='menuitem'>-->Tier1 Smart Conversion<br></br></li></ul></li>rn";

  $("#startJobDialog").html(markUp); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="startJobDialog"></div>