Example dropdown menu with bootstrap-select

Example Bootstrap <select> dropdown menus with bootstrap-select

First, I load the libraries:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.min.js"></script>

Then, I generate a list of plots or iframes (I’ve got a working R function for this at this point), and hook up the JavaScript:

<div>
<select id="carto-maps" class="selectpicker" data-live-search="true">
    <option value="https://kwalkertcu.carto.com/builder/2d99c916-a293-11e5-835d-0e5db1731f59/embed">Poverty in Los Angeles County</option>
    <option value="https://kwalkertcu.carto.com/viz/bbb8f748-f6f9-11e5-8151-0e674067d321/embed_map">Parcel market value in Fort Worth</option>
    <option value="https://kwalkertcu.carto.com/builder/661c6e38-f63b-11e4-9085-0e853d047bba/embed">Obesity by state, 2013</option>
</select>
</div>

<iframe src="https://kwalkertcu.carto.com/builder/2d99c916-a293-11e5-835d-0e5db1731f59/embed" frameborder="0" height="500" width="100%" id="iframeId"></iframe>

<script>

$(document).ready(function(){
    $("#carto-maps").change(function(){
        $("#iframeId").attr("src", $(this).val());
    });
});

$('.selectpicker').selectpicker({
  liveSearch: true, 
  showTick: true, 
  width: 'auto'
});

</script>

Poverty in Los Angeles County Parcel market value in Fort Worth Obesity by state, 2013