jquery - 在单独的文件中使用带有 HTML 的 Jquery 将 Html 列表转换为选择

Question

我想使用 Jquery 将 UL 转换为选择菜单。棘手的部分是 UL 包含在一个单独的 html 文件中。

例如:

在单独的文件中:SomeFile.html

<ul id="UlExample" class="UlExample">
<li id="1" class="liClass"><a href="#" class="ExampleLink">1</a></li>
</ul>

这会被导入，每个 li(a) 中的文本都会作为选项添加到现有的选择列表 (ExampleSelect1) 中。

<select Name="ExampleSelect1" id="ExampleSelect1" class="ExampleSelect>
<option value="1">1</option>
</select>

实现此目标的最佳方法是什么？我将需要在页面加载时使用它一次，并在从新填充的选择菜单中选择一个选项时再次使用它。

Answer 1

或多或少是这样的:

1. > load容器中的文件“somefile.html”
2. 选择导入文件的a元素
3. 为每个元素在您的选择元素中创建一个选项元素

var select = $(".ExampleSelect");
$(".container").load("somefile.html")
$(".container .UlExample li a").each(function(){
  var textLink = $(this).text();
  var opt= $("<option />").attr("value", textLink).text(textLink);
   select.append(opt);
 })

.container
{
  display:none;
}

<div class="container"></div>
<select Name="ExampleSelect1" id="ExampleSelect1" class="ExampleSelect>
<option value="1">1</option>
</select>