JSFiddle - React, Tailwind, and code Playground

by Moscrates

HTML

<!-- Start of first page -->
<div data-role="page" id="uno">
	<div data-role="header" data-theme="b" data-position="fixed">
    	<a href="index.html" data-theme="b" data-icon="back" data-rel="back">Salir</a>
		<h1>Produc - E</h1>
        <a href="#dialogo" data-theme="b" data-icon="check" data-transition="flip">Guardar</a>
	</div><!-- /header -->

	<div data-role="content">	
		  <label for="Cadena">Cadena:</label>
          <input type="text" name="Cadena" id="Cadena">
    
          <label for="Sucursal">Sucursal:</label>
          <input type="text" name="Sucursal" id="Sucursal">
          
          <label for="Fecha">Fecha:</label>
          <input type="date" name="Fecha" id="Fecha">
          
          <label for="Ciudad">Ciudad:</label>
          <input type="text" name="Ciudad" id="Ciudad">
          
          <label for="Distribuidor">Distribuidor:</label>
          <input type="text" name="Distribuidor" id="Distribuidor">
          
          <label for="Analista">Analista:</label>
          <input type="text" name="Analista" id="Analista">
	</div><!-- /content -->

	<div data-role="footer" class="ui-bar" data-theme="b" data-position="fixed" align="center" >
        <select name="modulos1" id="modulos1" data-theme="a" data-native-menu="false">
            <option>Modulos</option>
            <option value="uno">Cadena Comercial</option>
            <option value="dos">Surtido, Publicidad, Promotoria</option>
        </select>
	</div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="dos">
	<div data-role="header" data-theme="b" data-position="fixed">
    	<a href="index.html" data-theme="b" data-icon="back" data-rel="back">Salir</a>
		<h1>Produc - E</h1>
        <a href="#dialogo" data-theme="b" data-icon="check" data-transition="flip">Guardar</a>
	</div><!-- /header -->

	<div data-role="content">	
		<div data-role="fieldcontain" align="center">
            <fieldset data-role="controlgroup"...

JavaScript

$(document).ready(function(){
	console.log("Escuchando");
		$("#modulos1").change(function(e) {
			console.log("cambio");
			switch (this.value) {
				case "uno":
					$.mobile.changePage('#uno', { transition: "flip"} );
					break;
				case "dos":
					$.mobile.changePage('#dos', { transition: "flip"} );
					break;
				case "tres":
					$.mobile.changePage('#tres', { transition: "flip"} );
					break;
				case "cuatro":
					$.mobile.changePage('#cuatro', { transition: "flip"} );
					break;
				case "cinco":
					$.mobile.changePage('#cinco', { transition: "flip"} );
					break;
			}
		});	
		$("#modulos1").change(function(e) {
			console.log("cambio");
			switch (this.value) {
				case "uno":
					$.mobile.changePage('#uno', { transition: "flip"} );
					break;
				case "dos":
					$.mobile.changePage('#dos', { transition: "flip"} );
					break;
			}
		});	
	   $("#modulos2").change(function(e) {
			console.log("cambio");
			switch (this.value) {
				case "uno":
					$.mobile.changePage('#uno', { transition: "flip"} );
					break;
				case "dos":
					$.mobile.changePage('#dos', { transition: "flip"} );
					break;
				
			}
		});	
});