Bootstrap Modal using TimeZones

JavaScript
1

I like to set Bootstrap Modal using Select option and also link option (click event).

How to set also click event using link and also jQuery?


jQuery(document).ready(function()
 {
  jQuery('.modal-content').hide();
  var selectvalue = jQuery('select').val();
  jQuery('select').click(function()
   {
    if(jQuery('select').val() != selectvalue) {
     jQuery('.modal-content').show();
    }
    else {
     jQuery('.modal-content').hide();
    }
   }
  )
 }
);

HTML code:

<!DOCTYPE HTML>

<html>

<head>
<title>Modal and link using click event</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="js/javascript.js"></script>
</head>

<body>


<select data-style="btn-primary" style="overflow:visible;">
<option selected="selected" value="">Choose TimeZone...</option>
<optgroup label="TimeZones">
<option value="Pacific/Samoa">(GMT-11:00) Midway Island, Samoa</option><option value="Pacific/Honolulu">(GMT-10:00) Hawaii</option><option value="America/Anchorage">(GMT-08:00) Alaska</option>
</optgroup>
</select>




<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="MymodalID">My modal</h4>

</div><!-- .modal-header -->

<div class="modal-body">
timeZone area
</div>

</div><!-- .modal-content -->

</body>

</html>



jQuery(document).ready(function()
 {
  jQuery('.modal-content').hide();
  var selectvalue = jQuery('select').val();
  jQuery('select').click(function()
   {
    if(jQuery('select').val() != selectvalue) {
     jQuery('.modal-content').show();
    }
    else {
     jQuery('.modal-content').hide();
    }
   }
  )
 }
);

I’m not sure but (GMT-08:00) Alaska
will not change to Modal Window. Also, how to remove var selectvalue = jQuery(‘select’).val(); and modify into link if needed.

2

Do you want when select an option to open a modal and then redirect you via link to another page?

3

No, the same page.

I like to set both options using select item as working example and maybe change also just for the link option and then redirect to the same page. No need in this moment but do not know why I would need another page…but it is interesting idea. Redirection can be used for the different time zones like UK domain or DE…

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.