Jqueryが選択要素を表示していません。コンソールにエラーはありません

Question

私は「状態」選択といくつかの「キャリア」選択を持っています。簡単にするためにここでは2つのキャリア選択のみを使用しています。 私のjqueryは、選択した状態に基づいてキャリアの選択を表示すると仮定しています。 特定のクラスを追加するキャリアを選択できるように、状態選択値がキャリア選択名に追加されます。

問題：キャリアの選択が表示されません。私は一点でこれが働いていたので、途中で何かを変えたに違いない。ここで何が起こっているのか分かりません。どんな助けも素晴らしいだろう。ありがとう！

EDIT：オリジナルの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(); 
}); 

MY JAVASCRIPT（WORKS）の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

まず第一に、あなたのコードは、あなたが簡素化および/またはそれをより使いやすくするために回避することができ、私の愚見では、その中にいくつかの冗長性と、いくつかの疑問が決定しています。しかし、あなたが手で触れているほとんどのものを、Javascript/jQueryコードを使って実現する方法があります。完全なものについては、このfiddleをチェックし、スクリプトは同様にその説明と一緒に下回っている：

は、それが #state_selectの val()取得これがないです

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

、そう#carrier_selectセレクタ目標その右側に追加しidを返し、#state_selector_box（これは#state_selectを囲むようにしたもの）を除くすべてのアクティブセレクタを.carrier_selectクラスのものに変更して、それを非表示にしてから、最後にdropdown-boxクラスを使用して選択状態に対応するセレクタを表示します。また現れたセレクタのval()も0に設定されています。

Answer 2

あなたはあなたの選択要素の

.carrier_select { 
    display: none; 
} 

両方の要素を非表示にするCSSを言っているが、クラス「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>