Блог

Прошу прощения, поскольку я новичок в сообществе и в настоящее время изучаю применение Javascript и JSON для приведенных ниже:

Я пытаюсь сопоставить «id»: 7, «name»: «UPS», «parent_id»: [3, 4], когда пользователь выбирает либо «id»: 3, либо «id»: 4

Могу ли я узнать, как мне следует реализовать .indexOf или .includes в моем коде ниже

index.html

 <script>
$(document).ready(function(){

 load_json_data('service');

 function load_json_data(id, parent_id)
 {
  var html_code = '';
  $.getJSON('data.json', function(data)
  {
   html_code  = '<option value="">Select ' id '</option>';
   $.each(data, function(key, value)
   {
    if(id == 'service')
    {
     if(value.parent_id == '0')
     {
      html_code  = '<option value="' value.id '">' value.name '</option>';
     }
    }
    else
    {
     if(value.parent_id == parent_id)
     {
      html_code  = '<option value="' value.id '">' value.name '</option>';
     }
    }
   });
   $('#' id).html(html_code);
  });

 }

 $(document).on('change', '#service', function(){
  var service_id = $(this).val();
  if(service_id != '')
  {
   load_json_data('item', service_id);
   $('#contact').html('<option value="">Select contact</option>');
  }
  else
  {
   $('#item').html('<option value="">Select item</option>');
   $('#contact').html('<option value="">Select contact</option>');
  }
 });
 $(document).on('change', '#item', function(){
  var item_id = $(this).val();
  if(item_id != '')
  {
   load_json_data('contact', item_id);
  }
  else
  {
   $('#contact').html('<option value="">Select contact</option>');
  }
 });
});
</script>
  

data.json

 [
 {
  "id": 1,
  "name": "Delivery",
  "parent_id": 0
 }, 
 {
  "id": 2,
  "name": "Repair",
  "parent_id": 0
 }, 
 {
  "id": 3,
  "name": "Quick Deliver",
  "parent_id": 1
 }, 
  {
  "id": 4,
  "name": "Slow Deliver",
  "parent_id": 1
 }, 
 {
  "id": 5,
  "name": "Aircon",
  "parent_id": 2
 }, 
 {
  "id": 6,
  "name": "Television",
  "parent_id": 2
 }, 
 {
  "id": 7,
  "name": "UPS",
  "parent_id": [3, 4]
 }, 
 {
  "id": 8,
  "name": "LG support",
  "parent_id": 5
 },
 {
  "id": 9,
  "name": "Toshiba support",
  "parent_id": 6
 }
]
  

В структуре данных data.json файла parent_id может быть integer или может быть array of integers .

Пример parent_id в качестве integer :

  {
  "id": 8,
  "name": "LG support",
  "parent_id": 5
 }
  

Пример parent_id в качестве array :

 {
  "id": 7,
  "name": "UPS",
  "parent_id": [3, 4]
 }
  

Однако в вашем коде вы не рассматриваете второй случай (parent_id как array ).

Итак, в if инструкции, в которой вы проводите это сравнение, вы должны добавить or для обработки случаев, когда строка имеет parent_id в виде массива.

Вместо

 if(value.parent_id == parent_id) {
  html_code  = '<option value="' value.id '">' value.name '</option>';
}
  

Вы должны использовать приведенный ниже код, который также обрабатывает массивы (используя функции Array.isArray() и Array.include() ):

 if(value.parent_id == parent_id || 
   (Array.isArray(value.parent_id) amp;amp; value.parent_id.includes( parent_id)))
{
   html_code  = '<option value="' value.id '">' value.name '</option>';
}
  

Вот полный рабочий фрагмент (выбор службы delivery в первом <select> в конечном итоге приведет к появлению UPS опции в третьем <select> ):

(Предупреждение: во фрагменте, чтобы заставить его работать, я переопределил $.getJSON , НЕ копируйте эту часть кода).

 $(document).ready(function(){

 load_json_data('service');

 function load_json_data(id, parent_id)
 {
  console.log('id = '   id   ', parent_id = '   parent_id);
  var html_code = '';
  $.getJSON('data.json', function(data)
  {
   html_code  = '<option value="">Select ' id '</option>';
   
   $.each(data, function(key, value)
   {
   //console.log(key   ' - '   JSON.stringify(value));
    if(id == 'service')
    {
     if(value.parent_id == '0')
     {
      html_code  = '<option value="' value.id '">' value.name '</option>';
     }
    }
    else
    {
     if(value.parent_id == parent_id || (Array.isArray(value.parent_id) amp;amp; value.parent_id.includes( parent_id)))
     {
      html_code  = '<option value="' value.id '">' value.name '</option>';
     }
    }
   });
   $('#' id).html(html_code);
  });

 }

 $(document).on('change', '#service', function(){
  var service_id = $(this).val();
  if(service_id != '')
  {
   load_json_data('item', service_id);
   $('#contact').html('<option value="">Select contact</option>');
  }
  else
  {
   $('#item').html('<option value="">Select item</option>');
   $('#contact').html('<option value="">Select contact</option>');
  }
 });
 $(document).on('change', '#item', function(){
  var item_id = $(this).val();
  if(item_id != '')
  {
   load_json_data('contact', item_id);
  }
  else
  {
   $('#contact').html('<option value="">Select contact</option>');
  }
 });
});  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script type="text/javascript">
$.getJSON = function(file, callback){
  var data = [
   {
    "id": 1,
    "name": "Delivery",
    "parent_id": 0
   }, 
   {
    "id": 2,
    "name": "Repair",
    "parent_id": 0
   }, 
   {
    "id": 3,
    "name": "Quick Deliver",
    "parent_id": 1
   }, 
    {
    "id": 4,
    "name": "Slow Deliver",
    "parent_id": 1
   }, 
   {
    "id": 5,
    "name": "Aircon",
    "parent_id": 2
   }, 
   {
    "id": 6,
    "name": "Television",
    "parent_id": 2
   }, 
   {
    "id": 7,
    "name": "UPS",
    "parent_id": [3, 4]
   }, 
   {
    "id": 8,
    "name": "LG support",
    "parent_id": 5
   },
   {
    "id": 9,
    "name": "Toshiba support",
    "parent_id": 6
   }
  ];
  callback(data);
};

</script>
<select id="service"></select>
<select id="item"></select>
<select id="contact"></select>