使用2个下拉列表创建2个并排的表行以比较数据-JSON

Question

感谢您的帮助。 我一直在为我的网站页面上的一些代码编写程序，但遇到了障碍。

目标是要有两个下拉选择项，以产生两个表行（对于比较表，这些行并排显示在垂直列中）。

我知道代码是不正确的，因为我要两次输入相同的值，但是我不确定要在哪里进行更改以使第二次下拉来自第二个职业的数据。

到现在为止，两个下拉列表都生成相同的表行。 更新一个下拉菜单会覆盖现有结果。

这是一个https://jsfiddle.net/0qwz497e/ ，显示了我现在的位置。

我还打算使下拉列表可搜索，但想首先解决这个问题。 曾经有人以为我要更改呼叫事件，直到单击“比较”按钮后才更新。 任何帮助，将不胜感激。

谢谢

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <style>
table { border-collapse: collapse; }
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }
</style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="my-select"></select>
<select name="" id="my-select-2"></select>

<table id="my-table" border="1" style="width:100%">
  <thead>

  </thead>
  <tbody>
  </tbody>
</table>

  </body>

</html>
<script>
  var myCareerInfo = {
  careers: [{
    name: 'Occupational Therapy',
    id:123,
    careerInfo: {
      salary: 'Salary: $68,555',
      education: 'Education: Masters',
      skills: 'Example, Example, Example',
      description: 'Occupational therapist help people with their ADLs. They blah blah blah...'
    }
  }, {
    name: 'Phlebotomist',
    id:456,
    careerInfo: {
      salary: 'Salary: $46,753',
      education: 'Education: Certificate Program',
      skills: 'Example, Example, Example',
      description: 'Phlebotomists draw blood. They blah blah blah...'
    }
  }, {
    name: 'Physical Therapist',
    id:789,
    careerInfo: {
      salary: 'Salary: $88,555',
      education: 'Education: Doctorate',
      skills: 'Example, Example, Example',
      description: 'Physical therapist help people recover function after an injury. They blah blah blah...'
    }
  }]
}

function populateSelectBoxes($select, data) {
  var careers = [];
  $.each(data, function() {
    careers.push('<option value="'+this.id+'">' + this.name + '</option>');
  });
  $select.append(careers.join(''));
}

function populateTableRow($tableBody, data, selectedCareerId) {
  var career;
  $.each(data, function() {
    if (this.id == selectedCareerId) {
      career = this;
      return false;
    }
  });
  $tableBody.html('<tr style="width:50%">'+
                     '<td>' + career.name + '</td>'+
                     '<td>' + career.careerInfo.salary +'</td>'+
                     '<td>' + career.careerInfo.education + '</td>'+
                     '<td>' + career.careerInfo.skills + '</td>'+
                     '<td>' + career.careerInfo.description + '</td>'+
                  '</tr>'+
                  '<tr style="width:50%">'+
                     '<td>' + career.name + '</td>'+
                     '<td>' + career.careerInfo.salary +'</td>'+
                     '<td>' + career.careerInfo.education + '</td>'+
                     '<td>' + career.careerInfo.skills + '</td>'+
                     '<td>' + career.careerInfo.description + '</td>'+
                  '</tr>');


}
populateSelectBoxes($('#my-select'), myCareerInfo.careers);

$('#my-select').change(function() {
  var $this = $(this);
  var selection = $this.val();
  populateTableRow($('#my-table tbody'), myCareerInfo.careers, selection);
});
populateSelectBoxes($('#my-select-2'), myCareerInfo.careers);

$('#my-select-2').change(function() {
  var $this = $(this);
  var selection = $this.val();
  populateTableRow($('#my-table tbody'), myCareerInfo.careers, selection);
});
</script>

大部分代码来自@ DelightedD0D及其对另一个下拉问题的原始响应，但我还没有直接评论该响应的声誉。

Answer 1

我创建了两个表，并将它们并排排列以放置两个下拉菜单。 希望这可以帮助..

        <select name="" id="my-select"></select>
    <select name="" id="my-select-2"></select>
    <div>
    <table id="my-table1" border="1" style="float:left; width:49%;">
      <thead>

      </thead>
      <tbody>
      </tbody>
    </table>

    <table id="my-table2" border="1" style="width:49%; float:right;">
      <thead>

      </thead>
      <tbody>
      </tbody>
    </table>
        </div>

    <script>
      var myCareerInfo = {
      careers: [{
        name: 'Career 1',
        id:123,
        careerInfo: {
          salary: 453245,
          education: 45545,
          skills: '75f',
          description: '5 B.'
        }
      }, {
        name: 'Career 2',
        id:456,
        careerInfo: {
          salary: 11221,
          education: 542222,
          skills: '59f',
          description: '2 B.'
        }
      }, {
        name: 'Physical Therapist',
        id:789,
        careerInfo: {
          salary: 'Salary: $88,555',
          education: 'Education: Doctorate',
          skills: 'Example, Example, Example',
          description: 'Physical therapist help people recover function after an injury. They blah blah blah...'
        }
      }]
    }

    function populateSelectBoxes($select, data) {
      var careers = [];
      $.each(data, function() {
        careers.push('<option value="'+this.id+'">' + this.name + '</option>');
      });
      $select.append(careers.join(''));
    }

    function populateTableRow($tableBody, data, selectedCareerId) {
      var career;
      $.each(data, function() {
        if (this.id == selectedCareerId) {
          career = this;
          return false;
        }
      });
      $tableBody.html('<tr style="width:100%">'+
                         '<td>' + career.name + '</td>'+
                         '<td>' + career.careerInfo.salary +'</td>'+
                         '<td>' + career.careerInfo.education + '</td>'+
                         '<td>' + career.careerInfo.skills + '</td>'+
                         '<td>' + career.careerInfo.description + '</td>'+
                      '</tr>');


    }
    populateSelectBoxes($('#my-select'), myCareerInfo.careers);

    $('#my-select').change(function() {
      var $this = $(this);
      var selection = $this.val();

      populateTableRow($('#my-table1 tbody'), myCareerInfo.careers, selection);
    });
    populateSelectBoxes($('#my-select-2'), myCareerInfo.careers);

    $('#my-select-2').change(function() {
      var $this = $(this);
      var selection = $this.val();
      populateTableRow($('#my-table2 tbody'), myCareerInfo.careers, selection);
    });

    // initialize tables
    populateTableRow($('#my-table1 tbody'), myCareerInfo.careers, $('#my-select').val());
    populateTableRow($('#my-table2 tbody'), myCareerInfo.careers, $('#my-select-2').val());


    </script>

Answer 2

有太多解决方法。

我对您的代码尝试了一种（可能的）保守性解决方案。

您可以在jsfiddle中看到它。

综上所述：

function populateTableRow($tableBody, data, selectBoxes) {
  var career = [];

  selectBoxes.map(function(s){
        var currentId = s.val();
      return data.map(function(item){
            if(item.id == currentId) career.push(item);
      })
  });
  [...] (See jsfiddle for the rest)
};

...

var selectBoxes = [
  populateSelectBoxes($('#my-select'), myCareerInfo.careers),
  populateSelectBoxes($('#my-select-2'), myCareerInfo.careers),
]

$('#my-select').change(function() {
  populateTableRow($('#my-table tbody'), myCareerInfo.careers, selectBoxes);
});


$('#my-select-2').change(function() {
  populateTableRow($('#my-table tbody'), myCareerInfo.careers, selectBoxes);
});

...但是，实际上，我认为直接调用populateTableRow（）而不使用参数并通过范围继承直接获取数据会更好。 最好将整个事物封闭在一个封闭中。 但是，正如我所说，我试图对您的代码进行尽可能少的更改。 ;-)

因此，这里的要点是我直接将引用传递给两个选择框，因为您每次都覆盖整个表（因此您需要知道两个选择值）。

另一种方法是预先构建整个表，并仅更新右列的单元格。

第三，将函数包含在闭包中，在这种状态下，即使只传递一个选择框更改，您也可以记住所有先前的选择。

注意：几年前，我也遇到了类似的问题。 如果您试图在视觉上比较不同事物（不仅是两个）的特征，也许我的解决方案可能对您很有趣： iCompare我称之为它。

（Demostration链接不起作用，因为该服务器在一段时间之前就死了。对此我深表歉意）。

它有助于进行比较，因为用户可以动态删除不感兴趣的项目和/或特征，并且所有项目共有的特征也将从比较表中删除，并显示在（通用值）的摘要框中。

使用2个下拉列表创建2个并排的表行以比较数据-JSON

问题描述

2 个解决方案

解决方案1
0 2016-09-22 08:02:03

解决方案2
0 已采纳 2016-09-22 10:05:18

使用2个下拉列表创建2个并排的表行以比较数据-JSON

问题描述

2 个解决方案

解决方案1 0 2016-09-22 08:02:03

解决方案2 0 已采纳 2016-09-22 10:05:18

解决方案1
0 2016-09-22 08:02:03

解决方案2
0 已采纳 2016-09-22 10:05:18