Jquery-select2 -将select2添加到现有的下拉列表代码中以使其可搜索

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

本文关键字：代码 搜索 下拉列表 select2 添加 Jquery-select2      更新时间：2023-09-26

我有两个下拉选择框，导致两个职业的详细信息并排显示在表格的列中。为了便于使用和修改，代码被编辑了下来，去掉了许多实际的选项。它目前的工作很好，除了将有超过300个值可供选择，这是很多滚动。因此，我想使下拉框可搜索。我遇到的两个最好的选项是Select2和Chosen。

我似乎不能得到选择2或选择工作(即不使下拉框可搜索)。我两种都试过了，一定是哪里做错了。如果我从头开始一个jsfiddle，我可以让它们工作，但我似乎无法将其添加到我当前的代码中。我想我只是不确定如何将其集成到我当前的代码中。我已经放弃了展示我开始使用的代码的尝试。在哪里/如何我应该添加Select2到我的两个现有的下拉菜单的任何帮助将不胜感激。

这是我的jsfield 

<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: '$66,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: '$75,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: '$76,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);
});

试试这个:

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: '$66,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: '$75,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: '$76,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>

相关文章：