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之前，我的Java腳本（工作）：

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

您正在告訴CSS隱藏元素

.carrier_select {
  display: none;
}

您的兩個select元素都具有“ carrier_select”類，並且由於此CSS定義，它們不會顯示。 刪除或更改此定義以使其顯示。

Answer 2

以可以看到運營商選擇的方式進行編輯。 但是問題的其他部分-附加到承運人名稱之后，根據州顯示承運人需要更多輸入。

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

首先，根據我的拙見，您的代碼中有一些冗余和一些可疑的決定，您可以解決這些問題以簡化和/或使其更易使用。 但是，有一種方法可以使用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 4

在不評論其余代碼的情況下，嘗試刪除

.carrier_select {
    display: none;
}