0
두 개의 드롭 다운 및 내 함수 호출 코드를 구현하고 드롭 다운에서 무언가를 선택한 후 함수가 호출되지 않습니다.드롭 다운 선택 후 함수가 호출되지 않음
코드는 드롭 다운 선택과 관련된 기능을 실행한다고 가정합니다. 이것은 정상적인 드롭 다운에서 테스트되었고 모든 것이 원활하게 실행되었지만 어떤 이유로이 두 번의 드롭 다운에서 실행되지 않습니다.
코드가 선택을 출력하고 있지만이 함수를 호출하고 싶습니다.
도움을 주시면 감사하겠습니다.
감사합니다.
<!-- The first select list -->
<select name="slist1" onchange="SList.getSelect('slist2', this.value);">
<option>- - -</option>
<option value="amazon">Amazon</option>
<option value="apple">Apple</option>
<option value="keurig">Keurig</option>
<option value="nike">Nike</option>
</select>
<!-- Tags for the seccond dropdown list, and for text-content -->
<span id="slist2"></span> <div id="scontent"></div>
<script><!--
/* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
var SList = new Object(); // JS object that stores data for options
// HERE replace the value with the text you want to be displayed near Select
var txtsl2 = '';
/*
Property with options for the Seccond select list
The key in this object must be the same with the values of the options added in the first select
The values in the array associated to each key represent options of the seccond select
*/
SList.slist2 = {
"amazon": ['Kindle Fire HD', 'Kindle Charger', 'Kindle Fire HDX'],
"apple": ['MacBook', 'iMac', 'iPhone', 'iPad'],
"keurig": ['Platinum', 'Vue'],
"nike": ['Fuel Band']
};
/*
Property with text-content associated with the options of the 2nd select list
The key in this object must be the same with the values (options) added in each Array in "slist2" above
The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
*/
SList.scontent = {
"Kindle Fire HD": 'kindlefirehd',
"Kindle Charger": 'kindlecharg',
"Kindle Fire HDX": 'kindlefirehdx',
"MacBook": 'macbook',
"iMac": 'imac',
"iPhone": 'iphone',
"iPad": 'ipad',
"Platinum": 'platinum',
"Vue": 'vue',
"FuelBand": 'fuelband'
};
/* From here no need to modify */
// function to get the dropdown list, or content
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = ''; // empty option-content
if(SList[slist][option]) {
// if option from the last Select, add text-content, else, set dropdown list
if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else if(slist == 'slist2') {
var addata = '<option>- - -</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}
document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">'+addata+'</select>';
}
}
else if(slist == 'slist2') {
// empty the tag for 2nd select list
document.getElementById('slist2').innerHTML = '';
}
}
var functions = {
kindlefirehd: function(){window.alert("func1 called")},
kindlecharge: function(){window.alert("func1 called")},
kindlefirehdx: function(){window.alert("func1 called")},
macbook: function(){window.alert("func1 called")},
imac: function(){window.alert("func1 called")},
iphone: function(){window.alert("func1 called")},
ipad: function(){window.alert("func1 called")},
platinum: function(){window.alert("func1 called")},
vue: function(){window.alert("func1 called")},
fuelband: function(){window.alert("func1 called")}
}
$("select")
.change(function() {
var selected = $("select option:selected");
functions[selected.val()]();
})
.change();
</script>
여기에 코드가 너무 많습니다. 문제를 보여주는 작은 * 예로 이것을 정리해야합니다. 당신이 당신 자신대로 오류를 찾을 수있는 좋은 기회. –