jquery不顯示select元素。控制檯中沒有錯誤

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(); 
}); 

我的JavaScript（工程）TRYING JQUERY BEFORE：

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代碼實現您想要的大部分功能。有關完整的事，看看這個fiddle，腳本是下面的解釋以及沿：

$('#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

沒有評論的代碼的其餘部分，嘗試刪除

.carrier_select { 
    display: none; 
} 

Answer 4

以這樣的方式，你可以看到運營商選擇編輯。但您的問題的其他部分 - 追加到運營商名稱，顯示運營商依賴於狀態需要更多的投入。

$('#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>