Fatal编程技术网
  • javascript/
  • Javascript链式选择用于多个选择输入

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

javascript jquery html arrays

Javascript链式选择用于多个选择输入,javascript,jquery,html,arrays,filtering,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</opti

我有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>
我就是这样做的：

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


利涅
L1
L2
L3
L4
L5
L6
L7
L9
L10
L11
L12
L13
L14
L15
L16
L17
L18
L19
L20
L21
L66
L32
德佩特车站
阿里维站
var站=[
[0，'JAMAA EL-FNA'，'L1']，
[1，'KOUTOUBIA'，'L1']，
[2，‘德维尔酒店’，‘L1’]，
[3，'R.P BERDII'，'L1']，
[4，‘邮政总局’、‘L1’]，
[5，'CAREE EDEN'，'L1']，
[6，‘PL ABDELMOUMEN’，‘L1’]，
[7，‘放置D臂’、‘L1’]，
[8，'FST'，'L1']，
[9，'SEMIRAMIS'，'L1']，
[10，‘KUDIA博士’、‘L1’]，
[11，‘MCDO’、‘L1’]，
[12，‘咖啡胺’、‘L1’]，
[13，'FAC SEMLALIA'，'L1']，
[14，'ROUIDATE'，'L1']，
[15，‘司法部俱乐部’、‘L1’]，
[16，‘本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 Laarouse'，'L2']，
[25，'BAB TAGHZOUT'，'L2']，
[26，'BIN LMAASAR'，'L2']，
[27，'ARSET EL-MELLAK'，'L2']，
[28，'HOPITAL ANTAKI'，'L2']，
[29，‘安踏大道’，‘L2’]，
[30，'QCHICH'，'L2']，
[31，‘巴布卡奇街’，‘L2’]，
[32，'AIN ITTI'，'L2']
];
var行=“”；
$（'#selectLine'）。在（'change'，function（）上{
console.log（“line=“+this.value”）；
line=此值；
如果（第1行=“L1”）{
var elemf=station.filter（i=>i[2]=“L1”）；
控制台日志（elemf）；
}
});
对于（变量i=0；ivar res=station.filter（i=>i[0]>=gval1&&i[0]下面的示例根据第一个下拉列表上的值过滤第二个下拉列表：



var站=[
[0，'JAMAA EL-FNA'，'L1']，
[1，'KOUTOUBIA'，'L1']，
[2，‘德维尔酒店’，‘L1’]，
[3，'R.P BERDII'，'L1']，
[4，‘邮政总局’、‘L1’]，
[5，'CAREE EDEN'，'L1']，
[6，‘PL ABDELMOUMEN’，‘L1’]，
[7，‘放置D臂’、‘L1’]，
[8，'FST'，'L1']，
[9，'SEMIRAMIS'，'L1']，
[10，‘KUDIA博士’、‘L1’]，
[11，‘MCDO’、‘L1’]，
[12，‘咖啡胺’、‘L1’]，
[13，'FAC SEMLALIA'，'L1']，
[14，'ROUIDATE'，'L1']，
[15，‘司法部俱乐部’、‘L1’]，
[16，‘本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 Laarouse'，'L2']，
[25，'BAB TAGHZOUT'，'L2']，
[26，'BIN LMAASAR'，'L2']，
[27，'ARSET EL-MELLAK'，'L2']，
[28，'HOPITAL ANTAKI'，'L2']，
[29，‘安踏大道’，‘L2’]，
[30，'QCHICH'，'L2']，
[31，‘巴布卡奇街’，‘L2’]，
[32，'AIN ITTI'，'L2']
];
函数updateSelObj1（）{
var line=$（'#selectLine'）.val（）；
$（'#selectObject1'）[0]。长度=0；
对于（变量i=0；i



L1
L2
L3
L4
L5
L6
L7
L9
L10
L11
L12
L13
L14
L15
L16
L17
L18
L19
L20
L21
L66
L32

通过
链接选择。过滤器
（带Vue）
您想要的是使用函数编程来避免在for循环中手动筛选每个值。为此，我建议使用
.filter
，并避免在生成
时使用
选择
使用
.map
或Vue.js




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



var站=[
[0，'JAMAA EL-FNA'，'L1']，
[1，'KOUTOUBIA'，'L1']，
[2，‘德维尔酒店’，‘L1’]，
[3，'R.P BERDII'，'L1']，
[4，‘邮政总局’、‘L1’]，
[5，'CAREE EDEN'，'L1']，
[6，‘PL ABDELMOUMEN’，‘L1’]，
[7，‘放置D臂’、‘L1’]，
[8，'FST'，'L1']，
[9，'SEMIRAMIS'，'L1']，
[10，‘KUDIA博士’、‘L1’]，
[11，‘MCDO’、‘L1’]，
[12，‘咖啡胺’、‘L1’]，
[13，'FAC SEMLALIA'，'L1']，
[14，'ROUIDATE'，'L1']，
[15，‘司法部俱乐部’、‘L1’]，
[16，‘本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 Laarouse'，'L2']，
[25，'BAB TAGHZOUT'，'L2']，
[26，'BIN LMAASAR'，'L2']，
[27，'ARSET EL-MELLAK'，'L2']，
[28，'HOPITAL ANTAKI'，'L2']，
[29，‘安踏大道’，‘L2’]，
[30，'QCHICH'，'L2']，
[31，‘巴布卡奇街’，‘L2’]，
[32，'AIN ITTI'，'L2']
];
var行=“”；
var-res=''；
var单元格=“”；
var gval1=''；
var gval2=“”；
过滤线（）；
$（'#selectLine'）。在（'change'，function（）上{
过滤线（）；
});
函数filterLines（）{
//每次筛选时清除筛选列表
document.getElementById（'selecObject1'）。innerHTML=“”；
document.getElementById（'selecObject2'）。innerHTML=“”；
行=document.getElementById（'selectLine'）。值；
var elemf=station.filter（i=>i[2]==行）；
//使用筛选列表（elemf）从中获取值
对于（变量i=0；i    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);
    }



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



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



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