使用jQuery过滤下拉菜单

由于某些原因，某些选择可以正常工作，但大多数不可用。我无法弄清楚我做错了什么，也许你可以帮忙？这里是codepen现场演示：http://codepen.io/AlexBezuska/pen/dHmge 我的jQuery：使用jQuery过滤下拉菜单

$('#ddlOffice option').hide(); 
    $('#ddlBusiness').change(function(){ 
     var selectedBusiness = $("#ddlBusiness option:selected").val(); 
     selectedBusiness = parseFloat(selectedBusiness); 
     $('#ddlOffice option').hide(); 
     $('#ddlOffice option[value="'+selectedBusiness+'"]').show(); 
     $('#txtBusiness').val($("#ddlBusiness option:selected").text()); 
    }); 

    $('#ddlOffice').change(function(){ 
     $('#txtOffice').val($("#ddlOffice option:selected").text()); 
    });

加分点：我想这样做没有jQuery的，如果任何人有这样的显示和隐藏在原始的JavaScript的一个简单的方法技巧或者想要做一个没有jQuery的叉子就太棒了，

谢谢！

来源

2013-10-05 glasses

你究竟想做什么？我想你希望用户使用一个选择框来选择企业数量，然后基于此更改另一个选择框的选项。我对吗？ –

是的，确切地说。现在我只想将它转换为原始的JavaScript，而不依赖于jQuery，因为它只有应用程序使用的JavaScript。 – glasses

我想出了一个更好的办法：

var options = $("#ddlOffice").html(); 
$("#ddlBusiness").change(function(e) { 
    var selectedValue = $("#ddlBusiness :selected").val(); 
    $("#ddlOffice").html(options); 
    $('#ddlOffice :not([value="'+selectedValue+'"])').remove(); 
});

现在工作CodePen：http://codepen.io/AlexBezuska/pen/dHmge

来源

2013-10-05 13:57:42 glasses

我重新写了jQuery代码，现在它似乎是为我工作（fiddle）：

$(function() { 
    $('#ddlOffice option').hide(); 
    $('#ddlBusiness').change(function(){ 
     var selectedBusiness = parseFloat($("#ddlBusiness").val()); 
     $('#ddlOffice option').hide(); 
     $('#ddlOffice option[value="' + selectedBusiness + '"]').show(); 
     $('#txtBusiness').val($("#ddlBusiness option:selected").text()); 
    }); 
    $('#ddlOffice').change(function(){ 
     $('#txtOffice').val($(this).find("option:selected").text()); 
    }); 
});

请考虑：

如果您要将JavaScript放在HTML之前，请记住在jQuery中使用document.ready或$(function(){ })。
您不能选择具有与您在#ddlOffice中选择的值相同的选项。我的意思是使用将返回相同值的选项的目的是什么？！
您尚未在第二个select中关闭您的option s之一。

来源

2013-10-07 19:13:52

使用jQuery过滤下拉菜单

回答

相关问题