一旦选择的第一个下拉列表的值等于“Courier”，则显示第二个下拉列表

Question

我的问题是如何在我选择的第一个下拉值是 Courier 后显示第二个下拉列表

首先用户必须选中复选框以显示第一个下拉菜单，这是我的代码

  <p> <input  type="checkbox" id="contract" class="icheckbox_flat-green" onclick="myFunctionCons()"> Contract </p>

选中后，此合同通过下拉菜单（第一个下拉菜单）将可见

<select id="contractvia" style="display:none" class="form-control">
              <option value="0">Via..</option>
              <option value="1">Email</option>
              <option value="2">FB Messenger</option>
              <option value="3">Courier</option>
              <option value="4">Others..</option>
 </select>

我的目标是在合同选择的选项是 Courier 时显示第二个下拉列表

<select id="contractCourier" style="display:none" class="form-control">
               <option value="">Courier</option>
               <option value="scanned">Scanned</option>
               <option value="net">Original</option>
               <option value="mouth">Photocopy</option>
</select> 

使用此代码完成选中复选框后显示第一个下拉列表的第一个任务，但是一旦第一个下拉列表的选定选项为“Courier”，它就无法显示第二个下拉列表

<script>
function myFunctionCons() {
    var con = document.getElementById("contract");
    var conv = document.getElementById("contractvia");
    var conc = document.getElementById("contractCourier");
    if (con.checked == true) {
        conv.style.display = "block";
    } else {
        conv.style.display = "none";
    }
    if ($("#contractvia").val() == 3)
        conc.style.display = "block";
    else
        conc.style.display = "none";
}   
</script> 

Answer 1

请在 Vanilla Javascript 中检查此内容

var con = document.getElementById("contract");
var conv = document.getElementById("contractvia");
var conc = document.getElementById("contractCourier");

//On checkbox return first select
con.addEventListener('click', myFunctionCons );


//if value of option is 3 show next select
conv.addEventListener('change', showSecondSelect );

function showSecondSelect() {
	//3 is the index of courier
	if (conv.selectedIndex == 3) {
		conc.style.display = "block";
	} else {
		conc.style.display = "none";
	}
}

function myFunctionCons() {
	if (con.checked == true) {
		conv.style.display = "block";
	} else {
		conv.style.display = "none";
	}
}   

#contractvia,
#contractCourier {
	display: none;
}

<p><input type="checkbox" id="contract" class="icheckbox_flat-green">Contract</p>

<select id="contractvia" class="form-control">
	<option value="0">Via..</option>
	<option value="1">Email</option>
	<option value="2">FB Messenger</option>
	<option value="3">Courier</option>
	<option value="4">Others..</option>
 </select>

<select id="contractCourier" class="form-control">
	<option value="Courier">Courier</option>
	<option value="scanned">Scanned</option>
	<option value="net">Original</option>
	<option value="mouth">Photocopy</option>
</select>