Jquery隐藏下拉列表不工作

Jquery hide dropdown list not working

本文关键字：工作 下拉列表 隐藏 Jquery      更新时间：2023-09-26

你好，我有一个小问题。

我有2选择的形式，我想当我选择租赁受雇类型变得隐藏，这是我的代码:

<label>Type</label>
 <select id="Type-option" class="form-control">
     <option value="employed">Employed</option>
     <option value="rental">Rental</option>
</select>
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
     <option value="fulltime">FULLTIME</option>
     <option value="parttime">PARTTIME</option>
</select>
$(function() {
 var select = $('#Type-option');
select.on('change', function() {
  if (select.val() == "rental") {
    $('#employedType-option').hide();
  } else {
    $('#employedType-option').show();
  }
 });
});

你知道吗?

这里有一些建议1. 不要把你的标记和你的javascript混在一起。考虑在javascript中绑定事件2. 我稍微修改了一下您的标记，因为当您隐藏employeetype时，您也需要隐藏标签

检查下面的代码片段

$(document).ready(function(){
  var select = $('#Type-option');
  var employeeTypeOption=$('#employedType-option');
  var employedType=$('#employedType');
   select.on('change', function() {
    var selectOption=select.find('option:selected').val();
  if (selectOption == "rental") {
   employeeTypeOption.hide();
  employedType.hide();
  } else {
    employeeTypeOption.show();
    employedType.show();
  }
 });
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Type</label>
 <select id="Type-option" class="form-control">
     <option value="employed">Employed</option>
     <option value="rental">Rental</option>
</select>
<span id="employedType">
<label>Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
     <option value="fulltime">FULLTIME</option>
     <option value="parttime">PARTTIME</option>
</select>
</span>

希望能有所帮助

语法错误。检查$(document).on.('action','selection',function(){});签名

代码

 $(document).on('change','#Type-option', function() {
 if ($(this).val() == "rental") {
    $('#employedType-option').hide();
 } else {
    $('#employedType-option').show();
 }
 });

我不确定，但我猜你错过了其中一个，否则你的代码工作良好

  • 添加jquery library参考

  • 在script标签中包装jquery代码

    <script>
 $(function() {
 var select = $('#Type-option');    select.on('change', function() {
 if (select.val() == "rental") {
   $('#employedType-option').hide();
 } 
 else {
   $('#employedType-option').show();
 }
  });    
});
</script>

我认为这是你想要的。尝试工作演示

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<label>Type</label>
 <select id="Type-option" class="form-control">
     <option value="employed">Employed</option>
     <option value="rental">Rental</option>
</select>
<label id="emp">Employed Type</label>
<select id="employedType-option" value="employedType-option" class="form-control">
	 <option value="fulltime">FULLTIME</option>
	 <option value="parttime">PARTTIME</option>
</select>
<script type="text/javascript">
	
	$("#Type-option").on('change',function(){
		var theVal = $(this).val();//get the selected value
		if(theVal == "rental"){
			$("#emp").hide();
			$("#employedType-option").hide()
		}
		else{
			$("#emp").show();
			$("#employedType-option").show()
		}
	})
</script>
</body>
</html>

相关文章：