<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<!--libreria de bootstrap-->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<!--libreria de de chosen-->
		<link rel="stylesheet" href="chosen.css">
		<!--script de bootstrap-->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	
	</head>
	<body>
		<form>
			<br>
			
			
			<div class="col-md-12">
				<div class="col-md-3">
				</div>
				<div class="col-md-6">
					<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
				</div>
				<div class="col-md-3">
				</div>
			</div>
			<!-- Modal -->
			<div class="modal fade" id="myModal" role="dialog">
				<div class="modal-dialog">
				<!-- Modal contenido-->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h4 class="modal-title">Modal Titulo</h4>
					</div>
					<div class="modal-body">
						<p>
							<!--<div class="side-by-side clearfix">
								 <div class="form-group col-md-6">
									<label>Selecciones los campos</label>
									<select id="mul" data-placeholder="Seleccione los componentes" class="chosen-select" multiple style="width:350px;" tabindex="4">
										<option value=""></option>            
										<option value="Algodón">Algodón</option>
										<option value="Poliester">Poliester</option>
										<option value="Lana">Lana</option>
										<option value="Cuero">Cuero</option>
										<option value="Hilo">Hilo</option>
									</select>
								</div>
							</div>-->
							
							<div class="side-by-side clearfix">
								 <div class="form-group col-md-6">
									<label>Selecciones los campos</label>
									
									<select id="mul" data-placeholder="Seleccione los componentes" class="chosen-select" multiple style="width:350px;" tabindex="9">
										<option value=""></option>
										
									</select>                      
				
								</div>
							</div>	
							
						</p>
					</div>
					<div class="modal-footer">
					  <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
					  <button onclick="pres()" type="button" class="btn btn-primary">Guardar</button>
					</div>
				</div>			  
			</div>     
		</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>
  <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
   
	function pres()
	{
		var nomb=$('#mul').val();
		alert(nomb);
	}
	
	$(document).ready(function() {
		$.ajax({
			type: "POST",
			url: "/metrologia/views/pages/datos.php?Accion=GetProvincias",
			
			success: function(response)
			{
				$('#mul').html(response).fadeIn();
				 for (var selector in config) {
				  $(selector).chosen(config[selector]);
				}
				
				$('.chosen-container').css({ 'width':'400px' });
	
			}
		}); 
	});

  </script>
  </form>
  
</body>
</html>
