Question

我创建了一个带有搜索功能的php页面，其中包含一个包含student，id，registered_date的下拉菜单。现在我有一个搜索栏和一个日期（开始日期 - 结束日期）。我想在用户在下拉列表中选择registered_date时显示日期选择器，但我不知道如何操作。我知道他们使用.show()和.hide()，但我不知道如何在选择中使用它。

到目前为止，这是我的代码。

Category<select name="category" id="category">
        <option value='1' id="1">Student</option>
        <option value='2' id="2">ID</option>
        <option value='3' id="3">Registration_date</option>
        <option value='4' id="4">Course</option>
        </select>

Search Text<input type="text" name="txtsearch" placeholder="Type to Search" />
    Date Start: <input type="text" id="datepicker" name="date1">
    Date End: <input type="text" id="datepicker2" name="date2">

这是我的javascript / jquery

<script>
  $(function() {
    $( "#datepicker" ).datepicker({dateFormat: 'yy/mm/dd'});

  });
   $(function() {
    $( "#datepicker2" ).datepicker({dateFormat: 'yy/mm/dd'});
  });



****I dont know what the code for the hide and show part

</script>

Answer 1

据我所知，您可以使用以下内容：

 $( "#datepicker" ).show();
 $( "#datepicker" ).hide();

.show()或.hide()后跟的任何选择器都应该有效。

Answer 2

尝试

$('#category').on('change', function() {
  if($(this).val() == '3'){
    $("#datepicker").hide();
  } 
  else{
    $("#datepicker").show();
  }

}）;

如果您选择registered_date，则会显示/隐藏您的datepicker。

Answer 3

你正在寻找这样的东西：

$('#category').on('change', function(){
    if( $(this).val() == "3" ){
        $("#datepicker").show();
        $("#datepicker2").show();
    }
});

Answer 4

在选择时绑定更改事件并检查所选选项是否为注册日期..相应隐藏/显示日期选择器...

$('#category').change(function(event) {
        /* Act on the event */
        if($(this).val() == 3){
            $( "#datepicker" ).show();
        }else{
            $( "#datepicker" ).hide();
        }
    });

Answer 5

$('#datepicker, #datepicker2').datepicker();
$('#daterange').hide();

$('#category').on('change', function(){
    if( $(this).val() == "3" ){
        $('#daterange').show();
    }
    else
    {
        $('#daterange').hide();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Category<select name="category" id="category">
        <option value='1' id="1">Student</option>
        <option value='2' id="2">ID</option>
        <option value='3' id="3">Registration_date</option>
        <option value='4' id="4">Course</option>
        </select>

Search Text<input type="text" name="txtsearch" placeholder="Type to Search" />
<div id = "daterange">
    Date Start: <input type="text" id="datepicker" name="date1">
    Date End: <input type="text" id="datepicker2" name="date2">
    </div>

这是你想要的。将两个日期选择器放在一个div中，然后将它们隐藏起来，一起显示。

<强> FIDDLE (Example)

<强> HTML

Category<select name="category" id="category">
    <option value='1' id="1">Student</option>
    <option value='2' id="2">ID</option>
    <option value='3' id="3">Registration_date</option>
    <option value='4' id="4">Course</option>
    </select>

Search Text<input type="text" name="txtsearch" placeholder="Type to Search"  />
<div id = "daterange">
Date Start: <input type="text" id="datepicker" name="date1">
Date End: <input type="text" id="datepicker2" name="date2">
</div>

<强> JS

$('#datepicker, #datepicker2').datepicker();
$('#daterange').hide();

$('#category').on('change', function(){
if( $(this).val() == "3" ){
    $('#daterange').show();
}
else
{
    $('#daterange').hide();
}
});

Answer 6

尝试这样：

$(document).ready(function() {
  
   $( "#datepicker" ).hide();
	 $( "#datepicker2" ).hide();

		    $( "#datepicker" ).datepicker({dateFormat: 'yy/mm/dd'});
		    $( "#datepicker2" ).datepicker({dateFormat: 'yy/mm/dd'});
           	$("#category").on('change',function(){
           if($("#category").val() == 3){
	            $( "#datepicker" ).show();
	            $( "#datepicker2" ).show();
             }else{
	           $( "#datepicker" ).hide();
	           $( "#datepicker2" ).hide();
	 }

	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Category<select name="category" id="category">
        <option value='1' id="1">Student</option>
        <option value='2' id="2">ID</option>
        <option value='3' id="3">Registration_date</option>
        <option value='4' id="4">Course</option>
        </select>

Search Text<input type="text" name="txtsearch" placeholder="Type to Search" />
    Date Start: <input type="text" id="datepicker" name="date1">
    Date End: <input type="text" id="datepicker2" name="date2">

隐藏/显示基于下拉值的日期

6 个答案: