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

How to make a dropdown that updates from a single file?

  • 772

I would like to make my dropdown menu updateable from a single file.
Let me explain: On my website I have a general menu, this menu is in a file called nav.html every time I add a new section to my website, I just have to go to this file nav.html and there I put my new section This prevents me from going to each tab of the web and putting the new section one by one . I want to do the same thing but with a dropdown menu that I have. If someone could tell me how to make this dropdown section updateable from a single file that would be great. It would be a single file where I would put each new section.

I put what I use now:

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

What I want is to have a file somewhere that is easily updatable. If I am adding articles to my dropdown, and now I already have 8 articles, every time I put a new file, I am forced to open the 8 articles, which are 8 different html files. When I'm 25 it's going to be a hassle to open them all one by one. I think the best has to be an html or javascript file where my editable menu is.

javascript

2 Answers

  1. Best Answer

    Instead of making a document, HTMLI suggest you make one scriptthat creates the dropdown and inserts it where you want. Something like this:

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

    Since some of these things don't work in some browsers, you can convert this code to ES5 from here Babeljs.io

    • 3

  2. I leave you a couple of alternatives based on what you say in the comments below. The two are similar, they consist of having the HTML in the dropdown.html file and then loading its content using JavaScript (for simplicity I use jQuery and the method load()but it could be done with pure JavaScript and an AJAX call).

    Common to both alternatives

    Where you want the dropdown to go, put an divempty with id "dropdown" (for example) like so:

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

    So after jQuery has loaded you can load dropdown.html with the load method like so:

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

    And that will load the content of dropdown.html into the element with id "dropdown".

    Alternative 1: HTML + JavaScript

    If you have a file with JavaScript code, add a function that is to redirect the page:

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

    And your dropdown.html file would look something like this:

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

    Alternative 2: HTML + CSS

    In this alternative you don't need to have the JavaScript function in your code (except loading the page with AJAX) because everything will be done with HTML and CSS. The content of dropdown.html could be something like this (I make it executable so you can see that it simulates a dropdown list):

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

    And since they are links, you will no longer need any extra JavaScript code. In fact, you could add the CSS to your own CSS file and it would make the dropdown menu load faster. You just have to customize it.

    • 3