Форум

SeGun · #1 (**permalink**) 31.01.2013, 14:17

Здравствуйте.
Имеются 2 Select(a).
В первом последовательно числа от 1 до 12, во вторм от 0 до 11

Задача:
Ограничить выбор во втором Select до значения которое в сумме числа с первым даст максимальное значение 12.
Подскажите если знаете.

Deff · #2 (**permalink**) 31.01.2013, 14:20

SeGun,
Выложите HTML, (*и второе - есть input type=number ему и заранее ограничение удобней задать и нагляднее

рони · #3 (**permalink**) 31.01.2013, 14:38

SeGun,

<!DOCTYPE HTML>
<html>
<head>
  <title></title>
  <meta charset="utf-8" />
</head>

<body>
<select>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
  	                  <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
  	                  <option value="10">10</option>
                      <option value="11">11</option>
                      <option value="12">12</option>

 </select>
 <select>
                      <option value="0">0</option>
                      <option value="1">1</option>
                      <option value="2">2</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
  	                  <option value="5">5</option>
                      <option value="6">6</option>
                      <option value="7">7</option>
                      <option value="8">8</option>
                      <option value="9">9</option>
  	                  <option value="10">10</option>
                      <option value="11">11</option>


 </select>

<script>
    var select = document.getElementsByTagName('select')[0];

    select.addEventListener('change', function() {
        var i = this.selectedIndex
        var select = document.getElementsByTagName('select')[1];
        select.options.length=0
        for (var k=0; k<12-i; k++)  {
           select.options[k] = new Option(k, k);
        }
    });
</script>
</body>
</html>

SeGun · #4 (**permalink**) 31.01.2013, 16:33

Спасибо огромное!

rgl · #5 (**permalink**) 31.01.2013, 17:21

Прикола ради слегка модифицировал скрипт. Во-первых, можно избавиться от множественных new Option после каждого изменения, во-вторых, в моем варианте сохраняются первоначальный текст, (если от отличается от просто циферок)

<script type="text/javascript">
  (function() {
    var select2 = document.getElementsByTagName('select')[1];
    var optionStore = [];
    for( var i = 0; i < select2.options.length; ++i )
      optionStore[i] = select2.options[i];

    var select1 = document.getElementsByTagName('select')[0];
    select1.addEventListener('change', function() {
      var i = this.selectedIndex
      select2.options.length=0
      for (var k=0; k<12-i; k++)
        select2.options[k] = optionStore[k];
    });
  } )();
</script>

rgl · #6 (**permalink**) 31.01.2013, 17:48

Или даже так:

<script type="text/javascript">
  (function() {
    var select2 = document.getElementsByTagName('select')[1];
    var optionStore = [];
    for( var i = 0; i < select2.options.length; ++i )
      optionStore[i] = select2.options[i];

    var select1 = document.getElementsByTagName('select')[0];
    select1.addEventListener('change', function() {
      var i = this.selectedIndex

      if( select2.options.length >= 12-i )
        select2.options.length = 12-i;
      else
        for (var k=select2.options.length; k<12-i; k++)
          select2.options[k] = optionStore[k];
    });
  } )();
</script>

Форум

Справочник

Discord чат

Курсы javascript