0

Стоит задача связать 2 селекта с помощью javascript так, что-бы выполнялись следующие условия:
1. если в селекте 1 выбрано 3, во втором выбирается option со значением 3 и доступны к выбору option 1, option 2, option 3. option 0 - недоступен к выбору.

2. если в селекте 1 выбрано 2, во втором выбирается option со значением 2 и доступнен к выбору option 1 и option 2, option 0 и option 3 - недоступены к выбору.

3. если в селекте 1 выбрано 1 - во втором селекте выбирается option 1, остальные не доступны к выбору.

4. если в селекте 1 выбрано 100 - во втором селекте выбирается option 0, остальные не доступны к выбору.

Задачка вроде бы не сложная, но что-то не выходит....
При выборе 100 в первом, во втором дуступны как 0, так и 1...

function roomsSincGuest(param1, param2) {
  return function (event) {
    var value = param1.value;
    var options = param2.options;
    var optionsLength = options.length;

    for (var i = 0; i < optionsLength; i++) {
      options[i].disabled = true;
      if (+options[i].value === 0 && +value === 100) {
        options[i].selected = true;
        options[i].disabled = false;
      }
      if (options[i].value < value && +options[i].value !== 0) {
        options[i].disabled = false;
      }
      if (options[i].value === value) {
        options[i].selected = true;
        options[i].disabled = false;
      }
    }
  };
}

var first = document.querySelector('#first');
var second = document.querySelector('#second');

first.addEventListener('change', roomsSincGuest(first, second));
<form>
  <select id="first" name="first">
    <option value="1" selected="">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="100">100</option>
  </select>

  <select id="second" name="second">
    <option value="3" selected="" >3</option>
    <option value="2" >2</option>
    <option value="1">1</option>
    <option value="0">0</option>
  </select>
</form>

2 ответа 2

3

Как вариант создать объект отображений значений первого селекта на второй

function roomsSincGuest(param1, param2) {
  var optionsMapping = {
    1: [1],
    2: [1, 2],
    3: [1, 2, 3],
    100: [0]
  };
  return function (event) {
    var value = +param1.value;
    var options = param2.options;
    var optionsLength = options.length;
    var availableOptions = optionsMapping[value];
    
    for (var i = 0; i < optionsLength; i++) {
        if(availableOptions.indexOf(+options[i].value) !== -1){
            options[i].disabled = false;
          if(+options[i].value === value || availableOptions.length === 1){
            options[i].selected = true;
          }
        } else {         
          options[i].disabled = true;
        }
    }
  };
}

var first = document.querySelector('#first');
var second = document.querySelector('#second');

first.addEventListener('change', roomsSincGuest(first, second));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="first" name="first">
    <option value="1" selected="">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="100">100</option>
  </select>

  <select id="second" name="second">
    <option value="3" selected="" >3</option>
    <option value="2" >2</option>
    <option value="1">1</option>
    <option value="0">0</option>
  </select>
</form>

1

Самый простой способ:

  function byId(id)
  {
    return document.getElementById(id);
  }

  //disable selected items in <select> tag
  function disableItems(element,from, to)
  {
       for(var i =from;i<to;i++)
       {
        console.log(byId(element)[i]);
        byId(element)[i].disabled=true;
       }
  }

  //enable all items in <select> tag
  function enableAll(element)
  {
    var item = byId(element);

     for(var i =0;i<item.length;i++)
       {
        item[i].disabled=false;
       }
  }


    function changeDynamicly()
    {
      //change selected index for second <select>
   byId("second").selectedIndex = this.selectedIndex;

   //enable all it's items
  enableAll("second");

  //also disable items from selected indexto the end..
  disableItems("second",this.selectedIndex+1,byId("second").length);
    }

  //attach event listener to change..
    byId("first").addEventListener("change",changeDynamicly);

</script>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.