Jquery 未显示选择元素.控制台中没有错误

Question

我有一个"状态"选择和一些"运营商"选择。 为简单起见，我在这里只使用两个运营商选择。 我的jquery假设根据所选状态显示运营商选择。 状态选择值将附加到运营商选择名称，以便我可以选择要向其添加特定类的运营商选择。

我的问题：我的运营商选择不会显示。我曾经有过这个工作，我一定在此过程中改变了一些东西。不知道这里发生了什么。任何帮助都会很棒。谢谢！

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

.HTML：

<div style="width:160px;">
<select name="state_select" id="state_select">
<option value="0" selected>Choose a state</option>
<option value="1">Connecticut</option>
<option value="2">New Hampshire</option>
<option value="3">New Jersey</option>
<option value="4">New York</option>
</select>
</div>
<div id="select-div1" class="select-div">
<select name="carrier_select" id="carrier_select1" class="carrier_select">
<option selected disabled>Select a carrier - Conn</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
<div id="select-div" class="select-div">                      
<select name="carrier_select" id="carrier_select2" class="carrier_select">
<option selected disabled>Select a carrier - NH</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>

JQUERY：

$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function 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("dropdown-box");
} else {
$(selectDiv).attr('class', 'carrier_select');
}
}
$('#state_select').change(function(e) {
$('.carrier_select').prop('selectedIndex', 0);
optionCheck();
});

在尝试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：

.select-div select {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.carrier_select {
display: none;
}

Answer 1

首先，以我的拙见，您的代码有一些冗余和一些可疑的决定，您可以解决以简化和/或使其更可用。但是，有一种方法可以使用Javascript/jQuery代码在大部分未触及的情况下实现您想要的内容。有关完整内容，请检查此小提琴，脚本及其解释如下：

$('#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_select类的选择器，从而使它们不可见，然后最终使用dropdown-box类使对应于所选状态的那个可见。此外，刚刚出现的选择器的val()设置为0.

Answer 2

你告诉 css 隐藏元素

.carrier_select {
display: none;
}

您的两个选择元素都具有类"carrier_select"，并且由于此 css 定义，它们不会显示。删除或更改此定义以显示它们。

Answer 3

以这样一种方式进行编辑，以便您可以看到运营商选择。但是您问题的另一部分 - 附加到运营商名称，根据州显示运营商需要更多输入。

$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function 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("dropdown-box");
} else {
$(selectDiv).attr('class', 'carrier_select');
}
}
$('#state_select').change(function(e) {
$('.carrier_select').prop('selectedIndex', 0);
optionCheck();
});

.select-div select {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="dropdown-box" style="width:160px;">
<select name="state_select" id="state_select">
<option value="0" selected>Choose a state</option>
<option value="1">Connecticut</option>
<option value="2">New Hampshire</option>
<option value="3">New Jersey</option>
<option value="4">New York</option>
</select>
</div>
<div id="select-div1" class="select-div">
<select name="carrier_select" id="carrier_select1" class="carrier_select">
<option selected disabled>Select a carrier - Conn</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
<div id="select-div" class="select-div">                      
<select name="carrier_select" id="carrier_select2" class="carrier_select">
<option selected disabled>Select a carrier - NH</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>

Answer 4

在不注释其余代码的情况下，尝试删除

.carrier_select {
display: none;
}