Question

嗨，我有一个小问题。

我有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();
  }
 });
});

任何想法？

Answer 1

这里很少有建议 1.永远不要将您的标记与javascript上的javascript.Consider绑定事件混合在一起 2.我已经修改了你的标记，因为当你隐藏雇员类型时你也需要隐藏标签

检查以下代码段

$(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>

希望这有帮助

Answer 2

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

以下代码的Tyr

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

Answer 3

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

添加对jquery library

将您的jquery代码包含在script标记内。

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

</script>

Answer 4

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

<!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>

Jquery隐藏下拉列表无法正常工作

4 个答案: