Как при выборе select открывать определенное модальное окно fancybox + ajax?

Question

[Валентин Попов]

У меня есть форма регистрации. При выборе значения определенного значения поля select, необходимо через ajax подгружать определенное модальное окно.
У меня сейчас следующий код:

<div class="header__wrap-right">
            <form action="." class="header__form" >
              <div class="header__loggin" data-fancybox data-type="ajax"
              data-src="modal.html" data-filter="#modal-signin">
                <select>
                  <option value="0" >Log in</option>
                  <option value="1">Sign in</option>
                  <option value="2">Sign up</option>
                </select>
              </div>
            </form>
          </div>

Javascritp код следующий:

(function () {
		var x, i, j, selElmnt, a, b, c;
		x = document.getElementsByClassName('header__loggin');

		for (i = 0; i < x.length; i++) {
			selElmnt = x[i].getElementsByTagName('select')[0];
			a = document.createElement('DIV');
			a.setAttribute('class', 'select-selected');
			a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
			x[i].appendChild(a);
			b = document.createElement('DIV');
			b.setAttribute('class', 'select-items select-hide');

			for (j = 1; j < selElmnt.length; j++) {
				c = document.createElement('DIV');
				c.innerHTML = selElmnt.options[j].innerHTML;
				c.addEventListener('click', function (e) {
					var y, i, k, s, h;
					s = this.parentNode.parentNode.getElementsByTagName('select')[0];
					h = this.parentNode.previousSibling;

					for (i = 0; i < s.length; i++) {
						if (s.options[i].innerHTML == this.innerHTML) {
							s.selectedIndex = i;
							h.innerHTML = this.innerHTML;
							y = this.parentNode.getElementsByClassName('same-as-selected');
							for (k = 0; k < y.length; k++) {
								y[k].removeAttribute('class');
							}
							this.setAttribute('class', 'same-as-selected');
							break;
						}
					}
					h.click();
				});
				b.appendChild(c);
			}
			x[i].appendChild(b);

			a.addEventListener('click', function (e) {
				e.stopPropagation();
				closeAllSelect(this);
				this.nextSibling.classList.toggle('select-hide');
				this.classList.toggle('select-arrow-active');
			});
		}

		function closeAllSelect(elmnt) {
			var x, y, i, arrNo = [];
			x = document.getElementsByClassName('select-items');
			y = document.getElementsByClassName('select-selected');
			for (i = 0; i < y.length; i++) {
				if (elmnt == y[i]) {
					arrNo.push(i)
				} else {
					y[i].classList.remove('select-arrow-active');
				}
			}
			for (i = 0; i < x.length; i++) {
				if (arrNo.indexOf(i)) {
					x[i].classList.add('select-hide');
				}
			}
		}
		document.addEventListener('click', closeAllSelect);
	})();

На данный момент я выбираю определенное значение select и у меня подгружается одно и тоже модальное окно при помощи вот этого кода data-fancybox data-type="ajax"
data-src="modal.html" data-filter="#modal-signin" . Но как мне организовать через такую же строчку кода чтобы когда выбрано значение Sign in всплывало одно модальное окно, а когда выбрано значение Sing UP всплывало другое модальное окно? Пока при выборе значений у меня всплывает одно и тоже модальное окно.