Javascript Jquery不显示select元素。控制台中没有错误

我有一个“国家”选择和一些“承运人”选择。为了简单起见，这里我只使用了两个载波选择。 假设我的jquery显示基于所选状态的carrier选择。 state select值附加到carrier select名称，以便我可以选择要向其中添加特定类的carrier select

我的问题是：我的承运人选择不会出现。我曾经有过这样的经历，在这过程中我一定改变了什么。不知道这里发生了什么。任何帮助都会很好。谢谢

编辑：我添加了我的原始JS，以显示我在哪里，以及我想如何更改为Jquery

HTML:

在尝试JQUERY之前，我的JAVASCRIPT（工作正常）：

function optionCheck() { 
   var i, len, optionVal, selectDiv,
   selectOptions = document.getElementById("state_select");

   // loop through the options in case there
   // are multiple selected values
   for (i = 0, len = selectOptions.options.length; i < len; i++) {
       // get the selected option value
       optionVal = selectOptions.options[i].value;
       // find the corresponding help div
       selectDiv = document.getElementById("carrier_select" + optionVal);
       // move on if I didn't find one
       if (!selectDiv) { continue; }
       // set CSS classes to show/hide help div
       if (selectOptions.options[i].selected) {
          selectDiv.className = "conn_select nh_select nj_select ny_select";
          $(selectDiv).addClass("dropdown-box");
       } else {
          //Hide carrier select on page load
          selectDiv.className = "carrier_select";
       }
   }   
 }
// bind the onchange handler
document.getElementById("state_select").onchange = optionCheck;

---

您正在告诉css隐藏该元素

.carrier_select {
  display: none;
}

---

您的两个select元素都具有“carrier\u select”类，并且由于此css定义，它们不会显示。删除或更改此定义以显示它们。

在不评论代码其余部分的情况下，尝试删除

.carrier_select {
    display: none;
}

---

编辑方式应确保您可以查看承运人选择。但你问题的另一部分——在承运人名称后面，根据州显示承运人需要更多的输入

$（'#state_select'）.prop（'selectedIndex'，0）；
$（'.carrier_select'）.prop（'selectedIndex'，0）；
函数optionCheck（）{
stateVal=$（'div.select-div select'）.val（）；
selectDiv=$（'#carrier_select'）[0]+stateVal；
if（$（stateVal）.attr（'selected'，'selected'））{
$（selectDiv）.attr（'class'，'conn_select'，'nh_select'，'nj_select'，'ny_select'）；
$（selectDiv.addClass（“下拉框”）；
}否则{
$（selectDiv.attr（'class'，'carrier_select'）；
}
}
$（'#state_select'）。更改（函数（e）{
$（'.carrier_select'）.prop（'selectedIndex'，0）；
optionCheck（）；
});
。选择div选择{
边界：无；
-webkit外观：无；
-moz外观：无；
文本缩进：1px；
文本溢出：“”；
}

选择一个州
康涅狄格州
新罕布什尔州
新泽西州
纽约
选择一个载波-连接
选择一个运营商-NH
首先，我认为您的代码中存在一些冗余和一些有问题的决定，您可以进行修改以简化和/或使其更可用。但是，可以使用
Javascript/jQuery
code来实现您想要的功能，而大部分功能都不受影响。对于完整内容，请选中此项，脚本及其说明如下：

$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);

function optionCheck() {
  stateVal = $('#state_select').val();
  selectDiv = $('#carrier_select'+ stateVal);
    $('.dropdown-box:not(#state_select_box)').removeClass('dropdown-box').addClass('carrier_select');
    $(selectDiv).removeClass('carrier_select').addClass('dropdown-box');    
    $($selectDiv).val('0');
}
$('#state_select').change(function(e) {
  optionCheck();
});

它的作用是获取
#state_select
的
val（）
，将其附加到
#carrier_select
中，以便选择器以正确的id为目标，然后更改所有活动的选择器，除了
#state_selector_box
（我将其包装为
#state_select
）对于具有
.carrier\u选择
类的对象，从而使其不可见，然后使用
下拉框
类最终使与所选状态相对应的对象可见。另外，刚刚出现的选择器的
val（）
设置为
0
 我也在想同样的事情。事实上，代码的其他问题/弱点似乎并不是围绕着这个特定的CSS规则而设计的！嘿，谢谢！“下拉框”类实际上是一种保留样式。很抱歉，我已经把它从样品中删除了。但我知道你在哪里了，这很好！我添加了我的旧JS，也许可以帮助查看我的位置。
.carrier_select {
  display: none;
}

.carrier_select {
    display: none;
}

$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);

function optionCheck() {
  stateVal = $('#state_select').val();
  selectDiv = $('#carrier_select'+ stateVal);
    $('.dropdown-box:not(#state_select_box)').removeClass('dropdown-box').addClass('carrier_select');
    $(selectDiv).removeClass('carrier_select').addClass('dropdown-box');    
    $($selectDiv).val('0');
}
$('#state_select').change(function(e) {
  optionCheck();
});