General drop-down menus-a list for multiple frames

There is a page that renders 4 frames. Each frame has three absolutely identical lists (In the example: "List_1", "List_2" and "List_3").

How do I make these lists common to all frames? At the moment, they are duplicated in each frame.

I understand that you need to make something like an array for each menu-list and then display it in each frame, but I don't know how to implement it yet.

Link to the working page in codepen: http://codepen.io/anon/pen/pbGXPm

is1 = document.getElementById('is1');
is2 = document.getElementById('is2');
is3 = document.getElementById('is3');
is4 = document.getElementById('is4');
s = document.getElementsByTagName('*');
arm = document.getElementById('armopt');

function riframe(name, link) {
  window[name].src = link;
  arm.src = 'armopt.nnn';
}

function options(opts, name) {
  for (i = 0; i < s.length; i++) {
    if (s[i].id === name) {
      for (i1 = i; i1 > 0; i1--) {
        if (s[i1].tagName === 'IFRAME') {
          value = s[i1].src;
          break;
        }
      }
      s[i].options.length = 0;
      for (i1 = 0; i1 < opts.length; i1++) {
        s[i].options[i1] = new Option(opts[i1][0], opts[i1][1]);
        if (value === opts[i1][1]) {
          s[i].options[i1].selected = true;
        }
      }
    }
  }
}
window.onload = riframe('arm', 'armopt.nnn');
setInterval("riframe('arm','armopt.nnn')", 60000);
div {
  float: right;
  display: inline-block;
  margin: 0px auto;
  width: 50%;
  height: 50%;
}
iframe {
  border: none;
  width: 100%;
  height: 94%;
}
select {
  height: 6%;
  width: 30%;
}
<div id="select">
  <iframe id="is1" src=""></iframe>
  <select id="s0" onchange="riframe('is1',this.value);">
    <option value="">Список_1</option>
    <option value="http://goodgame.ru/player3?6147">Имя_сайта_1</option>
    <option value="http://vidi.tv/lerss">Имя_сайта_2</option>
    <option value="http://goodgame.ru/player4?33226">Имя_сайта_3</option>
    <option value="http://goodgame.ru/player3?27188">Имя_сайта_4</option>
  </select>
  <select id="s1" onchange="riframe('is1',this.value);">
    <option value="">Список_2</option>
    <option value="http://Имя_сайта_5">Имя_сайта_5</option>
    <option value="http://Имя_сайта_6">Имя_сайта_6</option>
    <option value="http://Имя_сайта_7">Имя_сайта_7</option>
  </select>
  <select id="s2" onchange="riframe('is1',this.value);">
    <option value="">Список_3</option>
    <option value="http://178.165.99.99:3080/">Имя_сайта_8</option>
    <option value="http://www.ustream.tv/embed/17980668?v=3&amp;wmode=direct">Имя_сайта_9</option>
    <option value="http://www.ustream.tv/embed/17824093?v=3&amp;wmode=direct">Имя_сайта_10</option>
  </select>

</div>
<div>
  <iframe id="is2" src=""></iframe>
  <select id="s0" onchange="riframe('is2',this.value);">
    <option value="">Список_1</option>
    <option value="http://goodgame.ru/player3?6147">Имя_сайта_1</option>
    <option value="http://vidi.tv/lerss">Имя_сайта_2</option>
    <option value="http://goodgame.ru/player4?33226">Имя_сайта_3</option>
    <option value="http://goodgame.ru/player3?27188">Имя_сайта_4</option>
  </select>
  <select id="s1" onchange="riframe('is2',this.value);">
    <option value="">Список_2</option>
    <option value="http://Имя_сайта_5">Имя_сайта_5</option>
    <option value="http://Имя_сайта_6">Имя_сайта_6</option>
    <option value="http://Имя_сайта_7">Имя_сайта_7</option>
  </select>
  <select id="s2" onchange="riframe('is2',this.value);">
    <option value="">Список_3</option>
    <option value="http://178.165.99.99:3080/">Имя_сайта_8</option>
    <option value="http://www.ustream.tv/embed/17980668?v=3&amp;wmode=direct">Имя_сайта_9</option>
    <option value="http://www.ustream.tv/embed/17824093?v=3&amp;wmode=direct">Имя_сайта_10</option>
  </select>

</div>

<div id="select">
  <iframe id="is3" src=""></iframe>
  <select id="s0" onchange="riframe('is3',this.value);">
    <option value="">Список_1</option>
    <option value="http://goodgame.ru/player3?6147">Имя_сайта_1</option>
    <option value="http://vidi.tv/lerss">Имя_сайта_2</option>
    <option value="http://goodgame.ru/player4?33226">Имя_сайта_3</option>
    <option value="http://goodgame.ru/player3?27188">Имя_сайта_4</option>
    </select>
    <select id="s1" onchange="riframe('is3',this.value);">
      <option value="">Список_2</option>
      <option value="http://Имя_сайта_5">Имя_сайта_5</option>
      <option value="http://Имя_сайта_6">Имя_сайта_6</option>
      <option value="http://Имя_сайта_7">Имя_сайта_7</option>
    </select>
    <select id="s2" onchange="riframe('is3',this.value);">
      <option value="">Список_3</option>
      <option value="http://178.165.99.99:3080/">Имя_сайта_8</option>
      <option value="http://www.ustream.tv/embed/17980668?v=3&amp;wmode=direct">Имя_сайта_9</option>
      <option value="http://www.ustream.tv/embed/17824093?v=3&amp;wmode=direct">Имя_сайта_10</option>
    </select>

</div>
<div id="select">
  <iframe id="is4" src=""></iframe>
  <select id="s0" onchange="riframe('is4',this.value);">
    <option value="">Список_1</option>
    <option value="http://goodgame.ru/player3?6147">Имя_сайта_1</option>
    <option value="http://vidi.tv/lerss">Имя_сайта_2</option>
    <option value="http://goodgame.ru/player4?33226">Имя_сайта_3</option>
    <option value="http://goodgame.ru/player3?27188">Имя_сайта_4</option>
  </select>
  <select id="s1" onchange="riframe('is4',this.value);">
    <option value="">Список_2</option>
    <option value="http://Имя_сайта_5">Имя_сайта_5</option>
    <option value="http://Имя_сайта_6">Имя_сайта_6</option>
    <option value="http://Имя_сайта_7">Имя_сайта_7</option>
  </select>
  <select id="s2" onchange="riframe('is4',this.value);">
    <option value="">Список_3</option>
    <option value="http://178.165.99.99:3080/">Имя_сайта_8</option>
    <option value="http://www.ustream.tv/embed/17980668?v=3&amp;wmode=direct">Имя_сайта_9</option>
    <option value="http://www.ustream.tv/embed/17824093?v=3&amp;wmode=direct">Имя_сайта_10</option>
  </select>

</div>
Author: Izotop, 2016-08-24
Source

1 answers

I managed to implement my wishes on my own.

//-- Массив spisok_1  
var spisok_1 = [{
    'val': '',
    'name': 'Список_1'
  },
  {
    'val': 'https://site1.ru',
    'name': 'site1'
  },
  {
    'val': 'https://goodgame.ru/player4?33226',
    'name': 'GG2'
  },
  {
    'val': 'https://site2.ru',
    'name': 'site2'
  }
];
var options = '';
for (i in spisok_1) {
  options += '<option value="' + spisok_1[i].val + '">' + spisok_1[i].name + '</option>';
}
jQuery('#s01').append(options);
jQuery('#s02').append(options);
jQuery('#s03').append(options);
jQuery('#s04').append(options);

//-- Массив spisok_2
var spisok_2 = [{
    'val': '',
    'name': 'Список_2'
  },
  {
    'val': 'https://site3.ru',
    'name': 'site3'
  },
  {
    'val': 'https://site4.ru',
    'name': 'site4'
  },
  {
    'val': 'новое_зачение',
    'name': 'новое_имя'
  }
];
var options = '';
for (i in spisok_2) {
  options += '<option value="' + spisok_2[i].val + '">' + spisok_2[i].name + '</option>';
}
jQuery('#s11').append(options);
jQuery('#s12').append(options);
jQuery('#s13').append(options);
jQuery('#s14').append(options);

//-- Массив spisok_3
var spisok_3 = [{
    'val': '',
    'name': 'Список_3'
  },
  {
    'val': 'https://site6.ru',
    'name': 'site6'
  },
  {
    'val': 'https://site7.ru',
    'name': 'site7'
  },
  {
    'val': 'новое_зачение',
    'name': 'новое_имя'
  }
];
var options = '';
for (i in spisok_3) {
  options += '<option value="' + spisok_3[i].val + '">' + spisok_3[i].name + '</option>';
}
jQuery('#s21').append(options);
jQuery('#s22').append(options);
jQuery('#s23').append(options);
jQuery('#s24').append(options);


// ARM
is1 = document.getElementById('is1');
is2 = document.getElementById('is2');
is3 = document.getElementById('is3');
is4 = document.getElementById('is4');
s = document.getElementsByTagName('*');
arm = document.getElementById('armopt');

function riframe(name, link) {
  window[name].src = link;

}

function options(opts, name) {
  for (i = 0; i < s.length; i++) {
    if (s[i].id === name) {
      for (i1 = i; i1 > 0; i1--) {
        if (s[i1].tagName === 'IFRAME') {
          value = s[i1].src;
          break;
        }
      }
      s[i].options.length = 0;
      for (i1 = 0; i1 < opts.length; i1++) {
        s[i].options[i1] = new Option(opts[i1][0], opts[i1][1]);
        if (value === opts[i1][1]) {
          s[i].options[i1].selected = true;
        }
      }
    }
  }
}
html,
body {
  padding: 1px;
  height: 100%;
}

#divfull {
  width: 100%;
  height: 100%;
}

div {
  float: left;
  display: inline-block;
  margin: 4px;
  width: 49%;
  border: 1px solid black;
}

iframe {
  border: none;
  width: 100%;
  height: 94%;
}

select {
  height: 6%;
  width: 32%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divfull">
  <div id="select1">
    <iframe id="is1" src=""></iframe>
    <select id="s01" onchange="riframe('is1',this.value);"></select>
    <select id="s11" onchange="riframe('is1',this.value);"></select>
    <select id="s21" onchange="riframe('is1',this.value);"></select>
  </div>
  <div id="select2">
    <iframe id="is2" src=""></iframe>
    <select id="s02" onchange="riframe('is2',this.value);"></select>
    <select id="s12" onchange="riframe('is2',this.value);"></select>
    <select id="s22" onchange="riframe('is2',this.value);"></select>
  </div>
  <div id="select3">
    <iframe id="is3" src=""></iframe>
    <select id="s03" onchange="riframe('is3',this.value);"></select>
    <select id="s13" onchange="riframe('is3',this.value);"></select>
    <select id="s23" onchange="riframe('is3',this.value);"></select>
  </div>
  <div id="select4">
    <iframe id="is4" src=""></iframe>
    <select id="s04" onchange="riframe('is4',this.value);"></select>
    <select id="s14" onchange="riframe('is4',this.value);"></select>
    <select id="s24" onchange="riframe('is4',this.value);"></select>
  </div>
</div>

Adding spisok_1 to arrays, spisok_2, spisok_3 new values, they will automatically be displayed in the corresponding menu lists in each block.

Link to the working code

 0
Author: Izotop, 2017-12-16 10:29:34