jQuery不显示选择元素。 控制台中没有错误

Question

I have a "state" select and a few "carrier" selects. for simplicity I'm using only two carrier selects here. My jquery is suppose to show the carrier selects based on the the state selected. The state select value is appended to the carrier select name so I can choose which carrier select to add a specific class to.

MY PROBLEM: My carrier selects wont show up. I had this working at one point, and I must've changed something along the way. Not sure whats happening here. Any help would be great. Thanks!

EDIT: I've added my original JS to show where I was, and how I want to change to 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();
});

MY JAVASCRIPT (WORKS) BEFORE TRYING JQUERY:

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

You are telling css to hide the element

.carrier_select {
  display: none;
}

Both of your select elements have the class "carrier_select" and as a result of this css definition, they are not displayed. Remove or change this definition for them to be shown.

Answer 2

Edited in such a way that you can see the carrier selections. But other part of your question - appending to carrier name, showing carriers depending on the state needs more inputs.

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

First off, your code has some redundancies and some questionable decisions in it in my humble opinion that you could work around in order to simplify and/or make it more usable. However, there is a way to achieve what you want with most of it untouched, using Javascript/jQuery code. For the full thing, check this fiddle , the script is below as well along with its explanation:

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

What this does is it gets the val() of #state_select , appends it to the #carrier_select so that the selector targets the right id, then changes all active selectors, except the #state_selector_box (which I made to wrap around #state_select ) to ones with the .carrier_select class, thus making them invisible and then it finally makes the one that corresponds to the selected state visible using the dropdown-box class. Also the val() of the selector that just appeared is set to 0 .

Answer 4

Without commenting on the rest of the code, try removing

.carrier_select {
    display: none;
}