主页 / 问题 / 712272
Accepted
pepel_xD
Asked:2020-08-30 18:04:18 +0800 CST2020-08-30 18:04:18 +0800 CST

捆绑两个选择

  • 772

任务是使用javascript绑定2个select，这样满足以下条件：
1.如果select 1中选择了3，则第二个中选择了3，1、2、3option可以选择，0不可以选择.optionoptionoptionoption

2.如果选择1中选择option了2，则第二次选择值为2，1option和option2可供选择，option0和option3不可供选择。

3.如果在select 1中选择了1 - 在第二次select中选择了1 option，其余的都不能选择。

4.如果第1次选择100，第2次选择0 option，其余都无法选择。

任务似乎不难，但有些事情不成功....
当第一个选择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>

javascript

2 个回答

  1. Best Answer

    作为一个选项，创建一个将第一个选择的值映射到第二个的对象

    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>

    • 3

  2. 最简单的方法：

      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>
    • 1

相关问题