Question

我为依赖项选择菜单创建一个下拉列表。就像它在jsfiddle中的工作方式一样。

$('#user_time_zone').on('change', function() {
dateCalender = $(this).val();
if (dateCalender == 'Single Date') {
        $('#sd').show();
      $('#rd').hide();

}

 if (dateCalender == 'Range of Dates') {
    $('#rd').show();    
            $('#sd').hide();       
}  
});

   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
    </head>
    <body>
        <select id = "user_time_zone">
            <option>Type </option>
            <option value = "Single Date">Single Date</option>
            <option value = "Range of Dates">Range of Dates</option>
        </select>
        <div id='sd'>Single Date:<input type="text" id="singleDate" name="singleDate" /></div>
        <div id='rd'>Range of Dates:<input type="text" id="rangeDates" name="rangeDates" /></div>
    </body>
</html>

fiddle

我想知道在选择之前是否可以隐藏输入文本字段。并且仅在jsfiddle中显示为创建的jquery。

Answer 1

您可以创建一个类，并将其最初添加到div中。现在，更改select后，您可以addClass和removeClass来显示或隐藏输入

$('#user_time_zone').on('change', function() {
  dateCalender = $(this).val();
  if (dateCalender === 'Single Date') {
    $('#sd').removeClass('outputField');
    $('#rd').addClass('outputField');
  }

  if (dateCalender === 'Range of Dates') {
    $('#sd').addClass('outputField');
    $('#rd').removeClass('outputField');
  }
});

.outputField {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="user_time_zone">
  <option>Type </option>
  <option value="Single Date">Single Date</option>
  <option value="Range of Dates">Range of Dates</option>
</select>

<div id='sd' class='outputField'>Single Date:<input type="text" id="singleDate" name="singleDate" /></div>
<div id='rd' class='outputField'>Range of Dates:<input type="text" id="rangeDates" name="rangeDates" /></div>

Answer 2

您将需要在JS中添加初始状态，并为类型创建另一个条件，就像更新的jsfiddle

$('#user_time_zone').on('change', function() {
 dateCalender = $(this).val();
  if (dateCalender == 'Single Date') {
    $('#sd').show();
    $('#rd').hide();

  } else if (dateCalender == 'Range of Dates') {
    $('#rd').show();    
    $('#sd').hide();       
  } else if (dateCalender == 'Type') {
    $('#rd').hide();    
    $('#sd').hide();       
  }
});


$('#rd').hide();    
$('#sd').hide();

https://jsfiddle.net/v5zqsxtf/2/

Answer 3

页面加载时，您可以使用CSS隐藏元素。然后，您可以在else处理程序中的if条件中添加最终change语句，以便在再次选择默认选项的情况下将它们都隐藏起来：

var $rd = $('#rd'), 
  $sd = $('#sd');

$('#user_time_zone').on('change', function() {
  dateCalender = $(this).val();

  if (dateCalender == 'Single Date') {
    $sd.show();
    $rd.hide();
  } else if (dateCalender == 'Range of Dates') {
    $rd.show();
    $sd.hide();
  } else {
    $rd.add($sd).hide();
  }
});

#sd, #rd { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="user_time_zone">
  <option>Type </option>
  <option value="Single Date">Single Date</option>
  <option value="Range of Dates">Range of Dates</option>
</select><br><br>
<div id="sd">
  Single Date: <input type="text" id="singleDate" name="singleDate" />
</div><br>
<div id="rd">
  Range of Dates: <input type="text" id="rangeDates" name="rangeDates" />
</div>

Answer 4

如果您只想从下拉菜单中选择输入字段，然后使用隐藏/显示，则可以在选择下拉菜单选项后附加整个输入部分

$('#user_time_zone').on('change', function() {

dateCalender = $(this).val();

if (dateCalender == 'Single Date') {

$('#sd').html('Single Date:<input type="text" id="singleDate" name="singleDate" />');


}else{
$('#sd').html('Range of Dates:<input type="text" id="rangeDates" name="rangeDates" />');

}

您只需要

<div id='sd'></div>

在html部分

Answer 5

在您的特定情况下（只有两个目标元素），您可以简单地使用.hide类和jQuery的.toggle()方法：

$('#user_time_zone').on('change', () => $('.utz').toggle());

.none { display: none; }

<select id="user_time_zone">
  <option selected>Single Date</option>
  <option>Range of Dates</option>
</select>
<label class="utz">Single:<input type="text" name="singleDate"></label>
<label class="utz none">Range:<input type="text" name="rangeDates"></label>

<script src="//code.jquery.com/jquery-3.1.0.js"></script>

从菜单中选择之前隐藏文本字段

5 个答案: