Home / Questions / 15689
Accepted
Marc Lemien
Asked: 2020-07-03 01:19:11 +0800 CST 2020-07-03 01:19:11 +0800 CST

如何制作从单个文件更新的下拉菜单？

  • 772

我想让我的下拉菜单可以从单个文件更新。
让我解释一下：在我的网站上，我有一个通用菜单，这个菜单在一个名为 nav.html 的文件中，每次我向我的网站添加一个新部分时，我只需要转到这个文件 nav.html 并把我的新部分 这使我无法访问 Web 的每个选项卡并一个一个地放置新部分。我想做同样的事情，但我有一个下拉菜单。如果有人能告诉我如何使这个下拉部分可以从一个文件中更新，那就太好了。这将是一个文件，我将在其中放置每个新部分。

我把我现在用的：

<SCRIPT LANGUAGE="JavaScript">
    function salta(Sel)
    {
        if (Sel.ad.selectedIndex != 0)
        {
            document.location=Sel.ad.options[Sel.ad.selectedIndex].value
        }
    }
</SCRIPT>
<div>
    <form>
        <select name="ad" onchange="salta(this.form)">
            <option selected>Artículos:
            <option value=“articulo1.html”>ejemplo 1
            <option value="articulo2.html”>Ejemplo 2
        </select>
    </form>
</div>

我想要的是在某个地方有一个易于更新的文件。如果我在我的下拉列表中添加文章，现在我已经有 8 篇文章，每次我放一个新文件时，我都被迫打开这 8 篇文章，它们是 8 个不同的 html 文件。当我 25 岁时，要一个一个打开它们会很麻烦。我认为最好的必须是我的可编辑菜单所在的 html 或 javascript 文件。

javascript

2 Answers

  1. Best Answer

    HTML我建议您制作一个script创建下拉列表并将其插入到您想要的位置的文档，而不是制作文档。像这样的东西：

    // deplegable.js
class miDesplegable {
  constructor({
    target = 'body', 
    opciones = [], 
    listener = new Function(), 
    nombre = ''} = {}) {

      this.target = $(target);
      this.form = $('<form/>');
      this.element = $('<select/>');
      this.element.attr('name', nombre);
      this.opcion_no_seleccionable = $('<option disabled selected>Otros artículos</option>');
      this.element.append(this.opcion_no_seleccionable);
      this.form.append(this.element);
    
      opciones.map(e=>{
        var opcion = $(`<option value="${e.value}">${e.titulo}</option>`);
        this.element.append(opcion);
      });

      this.listener = typeof listener === 'function' ? listener : new Function();
        
      this.element.on('change', this.listener.bind(null, this.element.get(0)));
    
      this.target.append(this.form);
  }
}
/*
----------------------------------------------------
Esto lo puedes poner dentro de un archivo "main.js" 
y llamarlo en los documentos HTML que necesites el 
desplegable.
----------------------------------------------------
*/
var listener = function(e){
  console.log(e.options[e.selectedIndex].value);
  // Aquí es donde abres la página, hay varias formas.

 //window.location.replace(e.options[e.selectedIndex].value);
 // window.location = e.options[e.selectedIndex].value;
 // window.open(e.options[e.selectedIndex].value); // Este abre en una pestaña nueva.
}

var desp = new miDesplegable({
  target : '#miDiv',
  opciones : [{
    titulo : 'UNO',
    value : '1'
  },{
    titulo : 'DOS',
    value : '2'
  },{
    titulo : 'TRES',
    value : '3'
  }],
  listener : listener
});

$('.animales').each((i, el)=>
  new miDesplegable({
    target : el,
    opciones : [{
      titulo : 'Perro',
      value : '1'
    },{
      titulo : 'Gato',
      value : '2'
    },{
      titulo : 'Loro',
      value : '3'
    }],
    listener : listener
  })
);
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- página_1.html -->
<p>Página 1</p>
<div id="miDiv"></div>

<!-- página_2.html -->
<p>Página 2</p>
<div class="animales"></div>
<div class="animales"></div>
<div class="animales"></div>

    由于其中一些东西在某些浏览器中不起作用，您可以从这里Babeljs.io将此代码转换为 ES5

    • 3

  2. 根据您在下面的评论中所说的话，我给您留下了几个替代方案。两者相似，它们包括在 dropdown.html 文件中包含 HTML，然后使用 JavaScript 加载其内容（为简单起见，我使用 jQuery 和该方法load()，但可以使用纯 JavaScript 和 AJAX 调用来完成）。

    两种选择的共同点

    在你想要下拉列表的地方，放一个divid 为“dropdown”的空（例如），如下所示：

    <div id="desplegable"></div>

    因此，在 jQuery 加载后，您可以使用 load 方法加载 dropdown.html，如下所示：

    <script>
$("#desplegable").load("desplegable.html");
</script>

    这会将 dropdown.html 的内容加载到 id 为“dropdown”的元素中。

    备选方案 1：HTML + JavaScript

    如果您有一个包含 JavaScript 代码的文件，请添加一个重定向页面的函数：

    function salta(enlace) {
    if (enlace != "")
        document.location = enlace;
}

    你的 dropdown.html 文件看起来像这样：

    <select onchange="salta(this.value)">
    <option value="">Elige un artículo</option>
    <option value="articulo1.html">Artículo 1</option>
    <option value="articulo2.html">Artículo 2</option>
    <option value="articulo3.html">Artículo 3</option>
    <option value="articulo4.html">Artículo 4</option>
</select>

    备选方案 2：HTML + CSS

    在此替代方案中，您不需要在代码中包含 JavaScript 函数（使用 AJAX 加载页面除外），因为一切都将使用 HTML 和 CSS 完成。dropdown.html 的内容可能是这样的（我将其设置为可执行的，因此您可以看到它模拟了一个下拉列表）：

    <ul id="desplegable">
	<li>Elige un artículo</li>
	<li><a href="articulo1.html">Artículo 1</a></li>
	<li><a href="articulo2.html">Artículo 2</a></li>
	<li><a href="articulo3.html">Artículo 3</a></li>
	<li><a href="articulo4.html">Artículo 4</a></li>
</ul>
<style type="text/css">
ul#desplegable {
	list-style:none;
	margin:0;
	padding:0;
	width:200px;
	height:25px;
	overflow:visible;
}
ul#desplegable li {
	display:none;
	height:25px;
	line-height:25px;
	position:relative;
	z-index:9;
	background:white;
	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}
ul#desplegable li:nth-child(1) {
	display:block;
	border:1px solid #ccc;
}
ul#desplegable li:nth-child(1):after {
	content:"+";
	float:right;
	margin-right:7px;
}
ul#desplegable:hover li {
	display:block;
}
ul#desplegable li:last-child {
	border-bottom:1px solid #ccc;
}
ul#desplegable li a {
	display:block;
}
ul#desplegable li a:hover {
	background:#f0f0f0;
}
</style>

    由于它们是链接，您将不再需要任何额外的 JavaScript 代码。实际上，您可以将 CSS 添加到您自己的 CSS 文件中，这样可以加快下拉菜单的加载速度。你只需要自定义它。

    • 3