将JS下拉选择选中标记设置在适当的位置，并使下拉列表看起来更好

Question

我正在尝试在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;'>\r\n";
  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>\r\n";
  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>\r\n";

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

...

根据上面的代码，我将HTML markup设置为#startJobDialog，它会给我以下输出：

正如您所看到的，每当我在菜单列表中选择一个项目时，selection checkmark都会在所选项目下方，但我真的希望它位于所选项目的旁边。看起来宽度是正确的，我尝试调整它。不是JS专家，我在初步练习中 - 关于<ul>, <li>等不同类，风格和其他参数的任何见解都会有所帮助，我真的想让这个下拉列表看起来比现在更好

如何在JS的右侧/我想要的位置设置该复选标记，并使选择列表看起来更好？

Answer 1

我的建议是从你的标记中删除css并将它们放在一个css文件中。

从那里，尝试绝对定位你的元素。

我在这篇文章中提供了一个代码示例代码，只是为了查看和使用。你可以看到一堆 <?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | This file is where you may define all of the routes that are handled | by your application. Just tell Laravel the URIs it should respond | to using a Closure or controller method. Build something great! | */ // Auth::routes(); Route::get('/login', 'Auth\LoginController@showLoginForm' ); Route::post('/login', 'Auth\LoginController@login'); Route::post('/logout', 'Auth\LoginController@logout'); Route::get('/home', 'HomeController@index'); 被添加到我认为是默认的选定项目。我没有看到添加复选标记的位置。

如果您提供代码段，我可以为您提供进一步的帮助。但是，浮动或绝对定位可能是一种选择。或者你可以使用:: before或:: after伪选择器。

为了使我更具体，我需要看到生成的确切标记。

<br>

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;'>\r\n";
  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>\r\n";
  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>\r\n";

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