Javascript 使用jQuery筛选下拉菜单

出于某种原因，有些选择有效，但大多数无效。我不知道我做错了什么，也许你能帮忙？ 以下是codepen的现场演示： 我的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的情况下实现fork，那就太棒了

---

谢谢

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

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

---

现在正在使用代码笔：

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

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

---

现在正在使用代码笔：

我重新编写了您的jQuery代码，现在它似乎正在为我工作（）：

请考虑：

如果将JavaScript放在HTML之前，请记住在jQuery中使用

document.ready

或

$（function（）{}）

您不能有与您在

#ddlOffice

选择中使用的值相同的选项。我的意思是，使用返回相同值的选项的目的是什么

您尚未在第二秒内关闭一个

选项

s

选择

---

我重新编写了您的jQuery代码，现在它似乎对我有用（）：

请考虑：

如果将JavaScript放在HTML之前，请记住在jQuery中使用

document.ready

或

$（function（）{}）

您不能有与您在

#ddlOffice

选择中使用的值相同的选项。我的意思是，使用返回相同值的选项的目的是什么

您尚未在第二秒内关闭一个

选项

s

选择

---

你到底想做什么？我认为您希望用户使用一个选择框来选择业务数量，然后在此基础上更改另一个选择框的选项。我说得对吗？是的，没错。现在我只想将其转换为原始javascript，而不依赖于jQuery，因为它是应用程序使用的唯一javascript？我认为您希望用户使用一个选择框来选择业务数量，然后在此基础上更改另一个选择框的选项。我说得对吗？是的，没错。现在我只想将其转换为原始javascript，而不依赖于jQuery，因为它是应用程序使用的唯一javascript。