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