条件下拉列表以联系表格7使用jQuery

时间:2016-08-19 05:43:21

标签: javascript jquery html wordpress contact-form-7

我想创建条件下拉列表。我有两个下拉菜单:第一个是课程&第二是位置。但有些课程不适用于某些地方。所以我想隐藏该课程选择的位置。



<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>
&#13;
&#13;
&#13;

所以请使用jquery建议任何解决方案。

2 个答案:

答案 0 :(得分:0)

任何人都建议我这个解决方案是对还是错。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

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

})
&#13;
<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> 
&#13;
&#13;
&#13;