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

Posted 2023-05-07

技术标签:

【中文标题】jquery-select2 - 将 select2 添加到现有的下拉代码中以使其可搜索【英文标题】：jquery-select2 - add select2 to existing dropdown code to make searchable 【发布时间】：2017-02-03 06:04:50 【问题描述】：

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

我似乎无法让 Select2 或 Chosen 工作（即不能让下拉列表可搜索）。我都试过了，一定是做错了什么。如果我从头开始一个 jsfiddle，我可以让它们工作，但我似乎无法将它添加到我当前的代码中。我想我只是不确定如何将它集成到我当前的代码中。我已经放弃了展示我开始使用的代码的尝试。任何关于我应该在哪里/如何将 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: '$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);
);

【问题讨论】：

“我无法让它正常工作”没有帮助。您定义“正常工作”的预期结果是什么，您的实际结果是什么（例如，它不应该做什么，反之亦然）？ @MJH 我猜不应该包括“正确”。我根本无法让它工作。问题是我，而不是select2。我想我可能正试图将代码插入错误的位置。如果我从头开始，我可以让 select2 工作，但我不确定如何将它添加到我现有的代码中。是不是更清楚了？是的，有点。您能否发布一个指向工作小提琴的链接（“从头开始”）？ @MJH jsfiddle.net/juL1t9k6 只是我修改的教程中的一个示例，以确保我可以让 Select2 工作。除了将名称更改为职业而不是国家之外，它与我的主要项目无关（所以我认为它不会有太大帮助）。我不知道如何将两者结合起来。对不起，我是菜鸟。感谢您的宝贵时间 【参考方案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: '$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>

【讨论】：

效果很好。感谢您的宝贵时间！

以上是关于jquery-select2 - 将 select2 添加到现有的下拉代码中以使其可搜索的主要内容，如果未能解决你的问题，请参考以下文章

将不在选择列表中的值输入到 jquery-select2 中

以编程方式添加新的 jquery-select2-4 选项并重置搜索字段？

jquery-select2 总是在控制器中发送空参数

清除多选 jquery-select2

使用 jquery-select2 的依赖下拉内容

使用 Spree 和 jQuery-Select2 为分组列表项和平面列表项设置样式