0
두 개의 드롭 다운 선택 상자가있어서 테이블의 side-by-side 열에 두 개의 경력에 대한 세부 정보가 표시됩니다. 이 코드는 사용 및 수정 용이성을 위해 실제 옵션을 많이 사용하여 편집되었습니다. 300 개 이상의 값 중에서 선택할 수있는 것을 제외하고는 현재 잘 작동합니다. 따라서 나는 dorpdowns를 검색 가능하게 만들고 싶습니다. 내가 만난 두 가지 최상의 옵션은 Select2와 Chosen입니다.jquery-select2 - 기존 드롭 다운 코드에 select2를 추가하여 검색 가능하게합니다.
Select2 또는 Chosen을 작동시키지 못했습니다. 즉, 드롭 다운을 검색 가능하게 만들지 못합니다. 나는 둘 다 시도하고 뭔가 잘못하고 있어야합니다. 처음부터 jsfiddle을 시작하면 이들을 작동시킬 수는 있지만 현재 코드에 추가 할 수는 없습니다. 내 현재 코드에 통합하는 방법을 모르겠다. 나는 내가 시작하는 코드를 보여주기위한 시도를 제거했다. 내 2 개의 기존 드롭 다운에 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
@MJH "적절하게"포함되어서는 안된다고 생각합니다. 나는 전혀 작동하지 않습니다. 문제는 select2가 아니라 저입니다. 나는 아마도 잘못된 위치에 코드를 삽입하려고 시도하고 있다고 생각한다. 처음부터 다시 시작하면 select2를 사용할 수 있지만 기존 코드에 추가하는 방법을 모르겠습니다. 그게 더 명확한가요? –
예, 조금. 작동하는 바이올린 ("처음부터 시작")에 대한 링크를 게시 할 수 있습니까? – MJH