我有两个下拉选择框，导致两个职业的详细信息显示在表的并排列中。为了便于使用和修改，代码已被删除，其中包含许多实际选项。它目前工作正常，但会有超过300个值可供选择，其中有很多滚动。因此，我想让可用的搜索功能可以搜索到。我遇到的两个最佳选择是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);
});
答案 0 :(得分：0)
试试这个：
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>