在contact form 7中使用jQuery的条件下拉菜单

Question

我想创建一个有条件的下拉列表。我有两个下拉列表:第一个是路线，第二个是位置。但有些课程在某些地方是不可用的。因此，我想隐藏该课程选择的位置。

​

<p>[select course-interested "Certified Design Engineer " "Certified CAD Engineer " "Certified CAD Professional " "Certified Basic CAD Modeler " "Workshop in 2D CAD and 3D CAD" "Certified Proficiency Workshop" "Proficiency Workshop In AutoCAD 2D+3D" "Pro-3D Visualization" "Pro-Architect" "Pro-Civil Engineer" "Pro- Interior Designer" "Corporate Training"]</p>
<p>[select* location "Dhankawadi" "Kothrud" "Chinchwad" "Hadapsar" "Baramati" "Nagar Road" "Nagpur"] </p>

​

因此，请建议使用jquery的任何解决方案。

Answer 1

有人建议我这个解决方案是正确的还是错误的。

​

<script type="text/javascript">
 
$(document).ready(function(){
 	$("#course").val("Certified Design Engineer").change(function()
 	{
    		 $("#location").val("Dhankawadi").show();
    		 $("#location").val("Kothrud").hide();
    		 $("#location").val("Chinchwad").hide();
    		 $("#location").val("Hadapsar").hide();
    		 $("#location").val("Baramati").hide();
    		 $("#location").val("Nagar Road").hide();
    		 $("#location").val("Nagpur").hide();
	});
});
 
</script>

​

Answer 2

​

$(document).ready(function(){
$('#course').change(function(){
  /*Here your spectific condition*/
  
 if($("#course option:selected").val()=="1" ||$("#course option:selected").val()=="3"){
 $('#location #location_1').show()
 $('#location #location_3').show()
 $('#location #location_2').hide()
 }
  else
    {
    $('#location #location_2').show()
      
    }
   
})

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="course"><option value="0">Select</option><option value="1">B.com</option><option value="2">B.Sc.</option><option value="3">B.A.</option></select>

<select id="location" ><option value="1" id="location_1">Mumbai</option><option value="2" id="location_2">NaviMumbai</option><option value="3" id="location_3" >Dhule</option></select> 

​