Smart Select

by Vladimir Kharlampidi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.6.5/js/framework7.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.6.5/css/framework7.ios.css">

    <div class="views">
      <!-- Your main view, should have "view-main" class -->
      <div class="view view-main">
        <div class="pages navbar-through toolbar-through">
          <div data-page="index" class="page">
            <div class="page-content">
              <p>Page content goes here</p>
              <a href="about.html">About app</a>
            </div>
          </div>
        </div>
        
      </div>

CSS

.modal-view {
  height: 300px;
}
.modal-view .list-block {
  margin: 0;
}

JavaScript

// Initialize app and store it to myApp variable for futher access to its methods
var myApp = new Framework7();

// We need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var mainView = myApp.addView('.view-main', {
  // Because we want to use dynamic navbar, we need to enable it for this view:
  dynamicNavbar: true
});

// Now we need to run the code that will be executed only for About page.

var paymentplan = myApp.modal({
  title: 'Add Payment Plan',
  afterText:'<div class="view modal-view">' +
  '<div class="pages">' +
  '<div class="page">' +
  '<div class="page-content">' +
  '<div id="leave-form" class="list-block">' +
  '<ul>' +
  '<li>' +
  '<div class="item-content">' +
  '<div class="item-inner">' +
  '<div class="item-input">' +
  '<input type="date" placeholder="To">' +
  '</div>' +
  '</div>' +
  '</div>' +
  '</li>' +
  '<li>' +
  '<div class="item-content">' +
  '<div class="item-inner">' +
  '<div class="item-input">' +
  '<input type="text" placeholder="To">' +
  '</div>' +
  '</div>' +
  '</div>' +
  '</li>' +
  '<li>' +
  '<div class="item-content">' +
  '<div class="item-inner">' +
  '<div class="item-input">' +
  '<input type="text" placeholder="Amount">' +
  '</div>' +
  '</div>' +
  '</div>' +
  '<li>' +
  '<a href="#" class="item-link smart-select">' +
  '<select name="fruits">' +
  '<option value="apple" selected>Monthly</option>' +
  '<option value="pineapple">Weekly</option>' +
  '</select>' +
  '<div class="item-content">' +
  '<div class="item-inner">' +
  '<div class="item-title">One Time</div>' +
  '</div>' +
  '</div>' +
  '</a>' +
  '</li>' +
  '<li class=="align-top">' +
  '<div class="item-content">' +
  '<div class="item-inner">' +
  '<div class="item-input">' +
  '<textarea placeholder="Memo"></textarea>' +
  '</div>' +
  '</div>' +
  '</div>' +
  '</li>' +
  '</ul>' +
  '</div>' +
  '</div>' +
  '</div>' +
  '</div>' +
  '</div>',


  buttons: [{
    text: 'Cancel',
    onClick:...