jquery-select2

Question

我有两个下拉 select 框，可以在 table 的并排列中显示两个职业的详细信息。为了便于使用和修改，已对代码进行了编辑，删除了许多实际选项。目前它工作正常，除了有超过 300 个值可供选择，其中有很多滚动。因此，我想让 dorpdowns 可以搜索。我遇到的两个最佳选择是 Select2 和 Chosen。

我似乎无法让 Select2 或 Chosen 工作（即无法使下拉菜单可搜索）。我都试过了，一定是做错了什么。如果我从头开始一个 jsfiddle，我可以让它们工作，但我似乎无法将它添加到我当前的代码中。我想我只是不确定如何将它集成到我当前的代码中。我已经删除了显示我开始使用的代码的尝试。如果对 where/how 我应该将 Select2 添加到我现有的两个下拉菜单中有任何帮助，我们将不胜感激。

这是我的 jsfiddle

<link rel="stylesheet" href="style.css">
   <script src="script.js"></script>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <p>
    Search over 300 careers below:
    </p>
    <p>Career One:
    <br>

    <select name="" id="my-select"></select>
    </p>
    <p>
    Career Two:
    <br>
    <select name="" id="my-select-2"></select>
    </p>

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

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

  </body>

还有 JS 一半...

    var myCareerInfo = {
  careers: [
  {
    name: 'Choose A Career',
    id: 100,
    careerInfo: {
      description: '',
      requiredEd: '',
      salary: '',
      curentJobs: '',
      jobGrowth: '',
      jobChange: '',
      category: '',
    }
  }, 
{
    name: 'Aerospace Engineering and Operations Technicians',
    id: 101,
    careerInfo: {
      description: 'Aerospace engineering and operations technicians operate and maintain equipment used in developing, testing, and producing new aircraft and spacecraft. Increasingly, these workers are using computer-based modeling and simulation tools and processes in their work.',
      requiredEd: 'Associate\'s degree',
      salary: ',180',
      curentJobs: '11,400',
      jobGrowth: '4% (Slower than average)',
      jobChange: '400',
      category: 'Architecture and Engineering',
    }
  }, 
{
    name: 'Agricultural Engineers',
    id: 103,
    careerInfo: {
      description: 'Agricultural engineers attempt to solve agricultural problems concerning power supplies, the efficiency of machinery, the use of structures and facilities, pollution and environmental issues, and the storage and processing of agricultural products.',
      requiredEd: 'Bachelor\'s degree',
      salary: ',090',
      curentJobs: '2,900',
      jobGrowth: '4% (Slower than average)',
      jobChange: '100',
      category: 'Architecture and Engineering',
    }
  }, 
{
    name: 'Architects',
    id: 104,
    careerInfo: {
      description: 'Architects plan and design houses, factories, office buildings, and other structures.',
      requiredEd: 'Bachelor\'s degree',
      salary: ',100',
      curentJobs: '112,600',
      jobGrowth: '7% (As fast as average)',
      jobChange: '7,800',
      category: 'Architecture and Engineering',
    }
  }
  ]
}

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

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);
      })
  });
  /* Comment out if you need to permit empty or unvalid selections
  while(career.length < 2)career.push({
    name: "",
    careerInfo: {
      salary: "",
      education: "",
      skills: "",
      description: "",
    }
  })
  //*/


  $tableBody.html('<tr>'+
                                    '<th style="width 10%"></th>'+
                     '<th style="width:45%">' + career[0].name + '</th>'+
                     '<th style="width:45%">' + career[1].name + '</th>'+
                     '</tr>'+
                     '<tr>' +
                     '<th>Salary</th>'+
                     '<td style="width:45%">' + career[0].careerInfo.salary +'</td>'+
                     '<td style="width:45%">' + career[1].careerInfo.salary +'</td>'+
                     '</tr>'+
                     '<tr>' +
                     '<th>Entry Level Education</th>'+
                     '<td>' + career[0].careerInfo.requiredEd + '</td>'+
                     '<td>' + career[1].careerInfo.requiredEd + '</td>'+
                     '</tr>'+
                     '<tr>' +
                     '<th>Career Description</th>'+
                     '<td>' + career[0].careerInfo.description + '</td>'+
                     '<td>' + career[1].careerInfo.description + '</td>'+
                     '</tr>'+
                     '<tr>' +
                     '<th>Number Of Current Jobs</th>'+
                     '<td>' + career[0].careerInfo.curentJobs + '</td>'+
                     '<td>' + career[1].careerInfo.curentJobs + '</td>'+
                     '</tr>'+ 
                     '<tr>' +
                     '<th>Job Growth</th>'+
                     '<td>' + career[0].careerInfo.jobGrowth + '</td>'+
                     '<td>' + career[1].careerInfo.jobGrowth + '</td>'+
                     '</tr>'+ 
                     '<tr>' +
                     '<th>Job Change</th>'+
                     '<td>' + career[0].careerInfo.jobChange + '</td>'+
                     '<td>' + career[1].careerInfo.jobChange + '</td>'+
                     '</tr>'+ 
                     '<th>Category</th>'+
                     '<td>' + career[0].careerInfo.category + '</td>'+
                     '<td>' + career[1].careerInfo.category + '</td>'+
                     '</tr>'
                     );


}

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

Answer 1

试试这个：

var myCareerInfo = {
    careers: [
        {
            text: 'Choose A Career',
            id: 100,
            careerInfo: {
                description: '',
                requiredEd: '',
                salary: '',
                curentJobs: '',
                jobGrowth: '',
                jobChange: '',
                category: '',
            }
        }, 
        {
            text: 'Aerospace Engineering and Operations Technicians',
            id: 101,
            careerInfo: {
                description: 'Aerospace engineering and operations technicians operate and maintain equipment used in developing, testing, and producing new aircraft and spacecraft. Increasingly, these workers are using computer-based modeling and simulation tools and processes in their work.',
                requiredEd: 'Associate\'s degree',
                salary: ',180',
                curentJobs: '11,400',
                jobGrowth: '4% (Slower than average)',
                jobChange: '400',
                category: 'Architecture and Engineering',
            }
        }, 
        {
            text: 'Agricultural Engineers',
            id: 103,
            careerInfo: {
                description: 'Agricultural engineers attempt to solve agricultural problems concerning power supplies, the efficiency of machinery, the use of structures and facilities, pollution and environmental issues, and the storage and processing of agricultural products.',
                requiredEd: 'Bachelor\'s degree',
                salary: ',090',
                curentJobs: '2,900',
                jobGrowth: '4% (Slower than average)',
                jobChange: '100',
                category: 'Architecture and Engineering',
            }
        }, 
        {
            text: 'Architects',
            id: 104,
            careerInfo: {
                description: 'Architects plan and design houses, factories, office buildings, and other structures.',
                requiredEd: 'Bachelor\'s degree',
                salary: ',100',
                curentJobs: '112,600',
                jobGrowth: '7% (As fast as average)',
                jobChange: '7,800',
                category: 'Architecture and Engineering',
            }
        }
    ]
}

$('#my-select').select2({
  data: myCareerInfo.careers
});

$('#my-select-2').select2({
  data: myCareerInfo.careers
});

var career = [{ id: 0, text: 'Physical Therapist' }, { id: 1, text: 'Another Career' }, { id: 2, text: 'Security Guard' }];
$('select#career').select2({
  data: career
});

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);
      })
  });
  /* Comment out if you need to permit empty or unvalid selections
  while(career.length < 2)career.push({
    name: "",
    careerInfo: {
      salary: "",
      education: "",
      skills: "",
      description: "",
    }
  })
  //*/

  $tableBody.html('<tr>'+
                                    '<th style="width 10%"></th>'+
                     '<th style="width:45%">' + career[0].name + '</th>'+
                     '<th style="width:45%">' + career[1].name + '</th>'+
                     '</tr>'+
                     '<tr>' +
                     '<th>Salary</th>'+
                     '<td style="width:45%">' + career[0].careerInfo.salary +'</td>'+
                     '<td style="width:45%">' + career[1].careerInfo.salary +'</td>'+
                     '</tr>'+
                     '<tr>' +
                     '<th>Entry Level Education</th>'+
                     '<td>' + career[0].careerInfo.requiredEd + '</td>'+
                     '<td>' + career[1].careerInfo.requiredEd + '</td>'+
                     '</tr>'+
                     '<tr>' +
                     '<th>Career Description</th>'+
                     '<td>' + career[0].careerInfo.description + '</td>'+
                     '<td>' + career[1].careerInfo.description + '</td>'+
                     '</tr>'+
                     '<tr>' +
                     '<th>Number Of Current Jobs</th>'+
                     '<td>' + career[0].careerInfo.curentJobs + '</td>'+
                     '<td>' + career[1].careerInfo.curentJobs + '</td>'+
                     '</tr>'+ 
                     '<tr>' +
                     '<th>Job Growth</th>'+
                     '<td>' + career[0].careerInfo.jobGrowth + '</td>'+
                     '<td>' + career[1].careerInfo.jobGrowth + '</td>'+
                     '</tr>'+ 
                     '<tr>' +
                     '<th>Job Change</th>'+
                     '<td>' + career[0].careerInfo.jobChange + '</td>'+
                     '<td>' + career[1].careerInfo.jobChange + '</td>'+
                     '</tr>'+ 
                     '<th>Category</th>'+
                     '<td>' + career[0].careerInfo.category + '</td>'+
                     '<td>' + career[1].careerInfo.category + '</td>'+
                     '</tr>'
                     );
}

var selectBoxes = [
  $('#my-select'),
  $('#my-select-2'),
];

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


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

<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
</head>
<body>
    <p>
        Search over 300 careers below:
    </p>
    <p>Career One:
        <br>
        <select name="" id="my-select"></select>
    </p>
    <p>
        Career Two:
        <br>
        <select name="" id="my-select-2"></select>
    </p>
    <table id="my-table" border="1" style="width:100%">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>

jquery-select2 - 将 select2 添加到现有下拉代码以使其可搜索

jquery-select2 - add select2 to existing dropdown code to make searchable

javascript

jquery

select

drop-down-menu