文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >用于多个选择输入的Javascript链式选择

问用于多个选择输入的Javascript链式选择
EN

Stack Overflow用户
提问于 2018-07-05 03:58:00
回答 1查看 352关注 0票数 -1

我有3个下拉列表()，其中两个是相似的，我创建了第一个来过滤最后两个选项。

第一个选择如下所示：

代码语言：javascript
复制
<select id="selectLine">
  <option value="L1">L1</option>
  <option value="L2">L2</option>
  <option value="L3">L3</option>
  <option value="L4">L4</option>
  <option value="L5">L5</option>
  <option value="L6">L6</option>
  <option value="L7">L7</option>
  <option value="L9">L9</option>
  <option value="L10">L10</option>
  <option value="L11">L11</option>
  <option value="L12">L12</option>
  <option value="L13">L13</option>
  <option value="L14">L14</option>
  <option value="L15">L15</option>
  <option value="L16">L16</option>
  <option value="L17">L17</option>
  <option value="L18">L18</option>
  <option value="L19">L19</option>
  <option value="L20">L20</option>
  <option value="L21">L21</option>
  <option value="L66">L66</option>
  <option value="L32">L32</option>
</select>

另外两个不是手动完成的，它们是用数组填充的：

代码语言：javascript
复制
var station = [
[0,'JAMAA EL FNA','L1'],
[1,'KOUTOUBIA','L1'],
[2,'HOTEL DE VILLE','L1'],
[3,'R.P BERDII','L1'],
[4,'GRAND POSTE','L1'],
[5,'CAREE EDEN','L1'],
[6,'PL ABDELMOUMEN','L1'],
[7,'PLACE D ARMES','L1'],
[8,'FST','L1'],
[9,'SEMIRAMIS','L1'],
[10,'DR KUDIA','L1'],
[11,'MCDO','L1'],
[12,'CAFE AMINE','L1'],
[13,'FAC SEMLALIA','L1'],
[14,'ROUIDATE','L1'],
[15,'CLUB MINISTRE JUSTICE','L1'],
[16,'BEN TBIB','L1'],
[17,'ASWAK SALAM','L1'],
[18,'BAB DOUKALA','L1'],
[19,'JAMAA EL FNA','L2'],
[20,'KOUTOUBIA','L2'],
[21,'PH KOUTOUBIA','L2'],
[22,'RIAD SHEBA','L2'],
[23,'DAR LBACHA','L2'],
[24,'RIAD LAAROUSSE','L2'],
[25,'BAB TAGHZOUT','L2'],
[26,'BIN LMAASAR','L2'],
[27,'ARSET EL MELLAK','L2'],
[28,'HOPITAL ANTAKI','L2'],
[29,'AVENUE ANTAKI','L2'],
[30,'QCHICH','L2'],
[31,'RUE BAB KHACHICH','L2'],
[32,'AIN ITTI','L2'] 
 ...];

这是我用来做的事情：

代码语言：javascript
复制
    for(var i=0;i<station.length;i++){
       var opText = "<option value='"+station[i] [0]+"'>"+station[i][1]+" - "+station[i][2]+"</option>";
       $("#selecObject1").append(opText);
    }

我想要做的是根据selectLine的值更改SelecObject1 & SelecObject2选项。例如，如果在第一个select中选择了L1，我希望其他两个select只显示表的第三行中包含L1的行。

我试过了，但它改变了表中的所有值，而不是过滤它们，而且一次对每个选项都这样做是不现实的：

代码语言：javascript
复制
    var line='';
    $('#selectLine').on('change', function () {
        console.log( "line= "+this.value );
        line=this.value;
        if (line == "L1"){
            var elemf = station.filter(i => i[2]="L1");
            console.log(elemf);
        }       
    });

​

代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Ligne</h4>
<select id="selectLine">
  <option value="L1">L1</option>
  <option value="L2">L2</option>
  <option value="L3">L3</option>
  <option value="L4">L4</option>
  <option value="L5">L5</option>
  <option value="L6">L6</option>
  <option value="L7">L7</option>
  <option value="L9">L9</option>
  <option value="L10">L10</option>
  <option value="L11">L11</option>
  <option value="L12">L12</option>
  <option value="L13">L13</option>
  <option value="L14">L14</option>
  <option value="L15">L15</option>
  <option value="L16">L16</option>
  <option value="L17">L17</option>
  <option value="L18">L18</option>
  <option value="L19">L19</option>
  <option value="L20">L20</option>
  <option value="L21">L21</option>
  <option value="L66">L66</option>
  <option value="L32">L32</option>
</select>


<h4>Station départ</h4>
<select id="selecObject1"></select>


<h4>Station arrivée</h4>
<select id="selecObject2"></select>

<script>
var station = [
  [0, 'JAMAA EL FNA', 'L1'],
  [1, 'KOUTOUBIA', 'L1'],
  [2, 'HOTEL DE VILLE', 'L1'],
  [3, 'R.P BERDII', 'L1'],
  [4, 'GRAND POSTE', 'L1'],
  [5, 'CAREE EDEN', 'L1'],
  [6, 'PL ABDELMOUMEN', 'L1'],
  [7, 'PLACE D ARMES', 'L1'],
  [8, 'FST', 'L1'],
  [9, 'SEMIRAMIS', 'L1'],
  [10, 'DR KUDIA', 'L1'],
  [11, 'MCDO', 'L1'],
  [12, 'CAFE AMINE', 'L1'],
  [13, 'FAC SEMLALIA', 'L1'],
  [14, 'ROUIDATE', 'L1'],
  [15, 'CLUB MINISTRE JUSTICE', 'L1'],
  [16, 'BEN TBIB', 'L1'],
  [17, 'ASWAK SALAM', 'L1'],
  [18, 'BAB DOUKALA', 'L1'],
  [19, 'JAMAA EL FNA', 'L2'],
  [20, 'KOUTOUBIA', 'L2'],
  [21, 'PH KOUTOUBIA', 'L2'],
  [22, 'RIAD SHEBA', 'L2'],
  [23, 'DAR LBACHA', 'L2'],
  [24, 'RIAD LAAROUSSE', 'L2'],
  [25, 'BAB TAGHZOUT', 'L2'],
  [26, 'BIN LMAASAR', 'L2'],
  [27, 'ARSET EL MELLAK', 'L2'],
  [28, 'HOPITAL ANTAKI', 'L2'],
  [29, 'AVENUE ANTAKI', 'L2'],
  [30, 'QCHICH', 'L2'],
  [31, 'RUE BAB KHACHICH', 'L2'],
  [32, 'AIN ITTI', 'L2']
];
  var line = '';


  $('#selectLine').on('change', function() {
    console.log("line= " + this.value);
    line = this.value;


    if (line == "L1") {

      var elemf = station.filter(i => i[2] = "L1");
      console.log(elemf);
    }
  });



  for (var i = 0; i < station.length; i++) {
    var opText = "<option value='" + station[i][0] + "'>" + station[i][1] + " - " + station[i][2] + "</option>";
    $("#selecObject1").append(opText);
  }
  for (var i = 0; i < station.length; i++) {
    var opText2 = "<option value='" + station[i][0] + "'>" + station[i][1] + " - " + station[i][2] + "</option>";
    $("#selecObject2").append(opText2);
  }

  var gval1 = '';

  $('#selecObject1').on('change', function() {
    console.log("val1= " + this.value);
    gval1 = this.value;
  });

  var gval2 = '';

  $('#selecObject2').on('change', function() {
    console.log("val2= " + this.value);
    gval2 = this.value;
  });
</script>



<script>
  var res = '';
  var cells = '';
  $('#btn').click(function() {
    if ((gval1 != -1) && (gval2 != -1)) {
      var res = station.filter(i => i[0] >= gval1 && i[0] <= gval2);
      cells = '<tr><td>' + res.join('</td></tr><tr><td>') + '</td></tr>';
      console.log(cells);
    } else {
      cells = "Veuillez choisir deux stations !";
    }
    document.getElementById("Tableau").innerHTML = cells;
  });
</script>

​

javascript
jquery
html
arrays
filtering
EN

回答 1

Stack Overflow用户

发布于 2018-07-05 04:35:25

所以我做了一些调整，我认为这就是你想要完成的。添加了一些评论来解释它背后的一些逻辑。

​

代码语言：javascript
复制
var station = [
  [0, 'JAMAA EL FNA', 'L1'],
  [1, 'KOUTOUBIA', 'L1'],
  [2, 'HOTEL DE VILLE', 'L1'],
  [3, 'R.P BERDII', 'L1'],
  [4, 'GRAND POSTE', 'L1'],
  [5, 'CAREE EDEN', 'L1'],
  [6, 'PL ABDELMOUMEN', 'L1'],
  [7, 'PLACE D ARMES', 'L1'],
  [8, 'FST', 'L1'],
  [9, 'SEMIRAMIS', 'L1'],
  [10, 'DR KUDIA', 'L1'],
  [11, 'MCDO', 'L1'],
  [12, 'CAFE AMINE', 'L1'],
  [13, 'FAC SEMLALIA', 'L1'],
  [14, 'ROUIDATE', 'L1'],
  [15, 'CLUB MINISTRE JUSTICE', 'L1'],
  [16, 'BEN TBIB', 'L1'],
  [17, 'ASWAK SALAM', 'L1'],
  [18, 'BAB DOUKALA', 'L1'],
  [19, 'JAMAA EL FNA', 'L2'],
  [20, 'KOUTOUBIA', 'L2'],
  [21, 'PH KOUTOUBIA', 'L2'],
  [22, 'RIAD SHEBA', 'L2'],
  [23, 'DAR LBACHA', 'L2'],
  [24, 'RIAD LAAROUSSE', 'L2'],
  [25, 'BAB TAGHZOUT', 'L2'],
  [26, 'BIN LMAASAR', 'L2'],
  [27, 'ARSET EL MELLAK', 'L2'],
  [28, 'HOPITAL ANTAKI', 'L2'],
  [29, 'AVENUE ANTAKI', 'L2'],
  [30, 'QCHICH', 'L2'],
  [31, 'RUE BAB KHACHICH', 'L2'],
  [32, 'AIN ITTI', 'L2']
];

var line = '';
var res = '';
var cells = '';
var gval1 = '';
var gval2 = '';

filterLines();

$('#selectLine').on('change', function() {
  filterLines();
});

function filterLines() {
  //Clear Filtered Lists each time we filter
  document.getElementById('selecObject1').innerHTML = "";
  document.getElementById('selecObject2').innerHTML = "";

  line = document.getElementById('selectLine').value;
  var elemf = station.filter(i => i[2] === line);

  //Use filtered list (elemf) to take values from
  for (var i = 0; i < elemf.length; i++) {
    var opText = "<option value='" + elemf[i][0] + "'>" + elemf[i][1] + " - " + elemf[i][2] + "</option>";
    $("#selecObject1").append(opText);
  }
  for (var i = 0; i < elemf.length; i++) {
    var opText2 = "<option value='" + elemf[i][0] + "'>" + elemf[i][1] + " - " + elemf[i][2] + "</option>";
    $("#selecObject2").append(opText2);
  } 
}

$('#selecObject1').on('change', function() {
  console.log("val1= " + this.value);
  gval1 = this.value;
});

$('#selecObject2').on('change', function() {
  console.log("val2= " + this.value);
  gval2 = this.value;
});


$('#btn').click(function() {
  if ((gval1 != -1) && (gval2 != -1)) {
    var res = station.filter(i => i[0] >= gval1 && i[0] <= gval2);
    cells = '<tr><td>' + res.join('</td></tr><tr><td>') + '</td></tr>';
    console.log(cells);
  } else {
    cells = "Veuillez choisir deux stations !";
  }
  document.getElementById("Tableau").innerHTML = cells;
});
代码语言：javascript
复制
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Ligne</h4>
<select id="selectLine">
  <option value="L1">L1</option>
  <option value="L2">L2</option>
  <option value="L3">L3</option>
  <option value="L4">L4</option>
  <option value="L5">L5</option>
  <option value="L6">L6</option>
  <option value="L7">L7</option>
  <option value="L9">L9</option>
  <option value="L10">L10</option>
  <option value="L11">L11</option>
  <option value="L12">L12</option>
  <option value="L13">L13</option>
  <option value="L14">L14</option>
  <option value="L15">L15</option>
  <option value="L16">L16</option>
  <option value="L17">L17</option>
  <option value="L18">L18</option>
  <option value="L19">L19</option>
  <option value="L20">L20</option>
  <option value="L21">L21</option>
  <option value="L66">L66</option>
  <option value="L32">L32</option>
</select>


<h4>Station départ</h4>
<select id="selecObject1"></select>


<h4>Station arrivée</h4>
<select id="selecObject2"></select>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/51180150

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档