Не работает select для динамических списков

214

14 сентября 2017, 18:53

Есть кусок кода в html странице. Задача создать два списка, при выборе значения первого списка - меняется значение второго. Задача тривиальная, но с javascript раньше не работал. Код следующий (набор переменных для второго списка заполняется с помощью python)-

      <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
      <script language="javascript" type="text/javascript">
      var jq81 = jQuery.noConflict();
      jq81(document).ready(function($){{
      var a = ['test1', 'test2'];
      var b = ['test3', 'test4'];
      jq81("#nodes").change(function() {{
        var parent = jq81(this).val();
        switch(parent){{
          case 'a':
            list(a);
            break;
          case 'b':
            list(b);
            break;
       }}
     }});
     function list(array_list)
     {{
       jq81("#intfs").html(""); //reset child options
       jq81(array_list).each(function (i) {{ //populate child options
          jq81("#intfs").append("<option value=\'"+array_list[i].value+"\'>"+array_list[i].display+"</option>");
       }});
      }}
  }});
  </script>

и html код -

        <select id="nodes" name="nodes">
        <option value="">-- Please Select --</option>
        <option value="a">a</option>
        <option value="b">b</option>
     </select>
     <select id="intfs" name="intfs" onchange="location = this.options[this.selectedIndex].value;">
     </select>

Фигурные скобки задублированны ( }} ) тк кусок javascript вставлен в python скрипт.

Проблема в том, что второй список всегда пустой, независимо от выбора в первом. В чем может быть проблема?

Answer 1

У вас в массиве лежат строки, а вы оттуда хотите достать объекты с пропертями display и value

var a = ['test1', 'test2'];

jq81("#intfs").append("<option value=\'"+array_list[i].value+"\'>"+array_list[i].display+"</option>");

Почистил немного от мусора, всё вроде работает.

      var jq81 = jQuery.noConflict(); 
      jq81(document).ready(function($){ 
      var a = [{value:1,display:'test1'}, {value:2,display:'test2'}]; 
      var b = ['test3', 'test4']; 
 
      jq81("#nodes").change(function() { 
        var parent = jq81(this).val(); 
        switch(parent){ 
          case 'a': 
            list(a); 
            break; 
          case 'b': 
            list(b); 
            break; 
       } 
     }); 
     function list(array_list){ 
       jq81("#intfs").html(""); //reset child options 
       jq81(array_list).each(function (i) { //populate child options 
          jq81("#intfs").append("<option value=\'"+array_list[i].value+"\'>"+array_list[i].display+"</option>"); 
       }); 
      } 
  });

   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
        <select id="nodes" name="nodes"> 
        <option value="">-- Please Select --</option> 
        <option value="a">a</option> 
        <option value="b">b</option> 
     </select> 
     <select id="intfs" name="intfs" onchange=""> 
     </select>

Answer 2

У элементов Ваших массивов нет свойств value и display.

var jq81 = jQuery.noConflict(); 
jq81(document).ready(function($) { 
  var a = ['test1', 'test2']; 
  var b = ['test3', 'test4']; 
 
  jq81("#nodes").change(function() { 
    var parent = jq81(this).val(); 
    switch (parent) { 
      case 'a': 
        list(a); 
        break; 
      case 'b': 
        list(b); 
        break; 
    } 
  }); 
}); 
 
function list(array_list) { 
  jq81("#intfs").html(""); //reset child options 
  jq81(array_list).each(function(i) { 
    //populate child options 
    jq81("#intfs").append( 
      "<option value=\'" + array_list[i] + "\'>" + 
        array_list[i] + "</option>"); 
  }); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select id="nodes" name="nodes"> 
        <option value="">-- Please Select --</option> 
        <option value="a">a</option> 
        <option value="b">b</option> 
     </select> 
<select id="intfs" name="intfs"> 
     </select>