javascript - drop down display on the second field based on selection in first field
Question
I have two fields customer category and customer type, when I select one element in customer category , I need to display only a set of elements from customer type in the drop down and rest should not appear. how do write it in javascript. Here is the one I tried but it doesnot yield proper result.
var custcategory = document.getElementById("custcatid");
var custtypes = document.getElementById('custtypeid').options;
alert('yes');
var n = custtypes.length;
var allowedtype;
if (custcategory.options[custcategory.selectedIndex].value == "ANALOGUE") {
alert('ANALOGUE');
allowedtype = 'CATV,CATV RURAL';
}
else if (custcategory.options[custcategory.selectedIndex].value == "COMMERCIAL") {
alert('COMMERCIAL');
allowedtype = ' ,3ST HOTEL,4ST HOTEL,5ST HOTEL';
}
else if (custcategory.options[custcategory.selectedIndex].value == "DAS") {
alert('DAS');
allowedtype = ' ,DAS PHASE1,DAS PHASE2,DAS PHASE3,DAS PHASE4';
}
else if (custcategory.options[custcategory.selectedIndex].value == "DTH") {
alert('DTH');
allowedtype = ' ,DTH';
}
var idx = 0;
for (var i = 0; i < n; i++) {
var type = custtypes[i].value;
var found = allowedtype.search(type);
if (found <= 0) {
custtypes[i].style.display = 'none';
}
else if (idx == 0) {
idx = 1;
document.getElementById('ctl00_uxPgCPH_custtype').selectedIndex = i;
}
}
alert('Done..!');
1 answers
solution1
0 2015-08-27 12:44:06
If I understand correctly, you are trying to filter a second select element based on what is selected in the first select element?
If so I put together the following snippet which might help you out. It can be probably be optimised further but it should help to get you started I feel.
(function () { var CLASSES = { categories: '.select__category', types : '.select__types' }, map = { ANALOGUE: [ 'CATV', 'CATV RURAL' ], COMMERCIAL: [ '3ST HOTEL', '4ST HOTEL', '5ST HOTEL' ], DAS: [ 'DAS PHASE 1', 'DAS PHASE 2', 'DAS PHASE 3' ] }, categorySelect = document.querySelector(CLASSES.categories), typeSelect = document.querySelector(CLASSES.types), filterTypes = function(val) { // Based on a value filter the types select. var opts = typeSelect.options, allowedOpts = map[val]; typeSelect.value = allowedOpts[0]; for(var i = 0; i < opts.length; i++) { if (allowedOpts.indexOf(opts[i].value) === -1) { opts[i].hidden = true; } else { opts[i].hidden = false; } } }; filterTypes(categorySelect.value); categorySelect.addEventListener('change', function(e) { filterTypes(this.value); }); }());
<!DOCTYPE html> <head></head> <body> <select id="categories" class="select__category"> <option value="ANALOGUE">Analogue</option> <option value="COMMERCIAL">Commercial</option> <option value="DAS">Das</option> </select> <select id="types" class="select__types"> <option value="CATV">Catv</option> <option value="CATV RURAL">Catv Rural</option> <option value="3ST HOTEL">3st Hotel</option> <option value="4ST HOTEL">4st Hotel</option> <option value="5ST HOTEL">5st Hotel</option> <option value="DAS PHASE 1">Das Phase 1</option> <option value="DAS PHASE 2">Das Phase 2</option> <option value="DAS PHASE 3">Das Phase 3</option> </select> </body>
If you run the snippet, you'll see that making changes to the first will update the second select accordingly based on the defined map.
Hope this can help you out!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.