javascript-根据第一个字段中的选择在第二个字段上下拉显示

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. 如何用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..!');

Answer 1

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! 希望这可以帮助您！

javascript-根据第一个字段中的选择在第二个字段上下拉显示

问题描述

1 个解决方案

解决方案1
0 2015-08-27 12:44:06

javascript-根据第一个字段中的选择在第二个字段上下拉显示

问题描述

1 个解决方案

解决方案1 0 2015-08-27 12:44:06

解决方案1
0 2015-08-27 12:44:06