Javascript链式选择用于多个选择输入

时间：2018-07-04 19:58:00

标签： javascript jquery html arrays filtering

我有3个下拉列表（），其中两个相似，我创建了第一个以过滤最后两个选项。

第一个选择如下：

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

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

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'] 
 ...];

这就是我这样做的目的：

    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选项。例如，如果在第一个选择中选择了L1，我希望其他两个选择仅在表的第三行中显示带有L1的行。

我尝试了此方法，但是它更改了表上的所有值而不是对它们进行过滤，而且一次为每个选项执行操作也不可行：

    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);
        }       
    });


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

3 个答案:

答案 0 :(得分：0)

下面的示例根据第一个下拉列表中的值过滤第二个下拉列表：

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']
];

function updateSelObj1() {
  var line = $('#selectLine').val();
  $('#selectObject1')[0].length = 0;
  for (var i = 0; i < station.length; i++) {
    if (station[i][2] != line)
      continue;
    var opText = "<option value='" + station[i][0] + "'>" +
      station[i][1] + " - " + station[i][2] +
      "</option>";
    $("#selectObject1").append(opText);
  }
}

$('#selectLine').on('change', updateSelObj1);
updateSelObj1();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

<select id="selectObject1"></select>

您可以类似地实现第三个选择。这个想法是：

  • 获取所选值：var line = $('#selectLine').val();
  • 清除下拉列表：$('#selectObject1')[0].length = 0;
  • 使用for重新添加，跳过您要过滤掉的内容：if (station[i][2] != line) continue;

答案 1 :(得分：0)

通过.filter（使用Vue）进行链式选择

您想要的是使用函数式编程，以避免在for循环中手动筛选每个值。为此，我建议使用.filter，并且为了避免生成select的for循环，请使用.map或 Vue.js

Here is an example 

<div id="app">
  <h4>Ligne</h4>
  <select id="selectLine" v-model='selectedLine'>
    <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>
  <select>
    <option v-for='station in filteredStations()' v-bind:value='station[0]' v-text="station[1] + '-' + station[2]">
    </option>
  </select>
</div>

JavaScript 

new Vue({
  el: "#app",
  data: {
    stations: [
      [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']
    ],
    selectedLine: '',
    filteredStations() {
      return this.stations.filter(station => station[2] === this.selectedLine)
    }
  }
})

答案 2 :(得分：0)

所以我做了一些调整，我想这就是你想要完成的。添加了注释以解释其背后的一些逻辑。

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;
});
<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>

相关问题
最新问题