Question

HTML：

＆＃13;

<select name="reports" id="sr">
  <option value="">Select Report...</option>
    <option value="avg" class="1">Average Sold</option>
    <option value="mma" class="1">Min|Max|Avg Sold</option>
    <option value="oh" class="2">On Hand Qty</option>
    <option value="mr" class="2">Money Report</option>
 </select>

<div id='1' class='box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date:   <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>

＆＃13;

jQuery：

＆＃13;

$(document).ready(function () {
  $('#1').hide();
  $('#sr').change(function () {
    $('#'+$(this).val()).show();
  });
});

＆＃13;

我试图让这个功能在选择框中选择平均或最小，最大，平均报告时，输入日期的DIV将变为可见。

截至目前，页面加载了隐藏的DIV，但它永远不会显示。提前谢谢。

Answer 1

您需要查看已接受的选项，您无法像使用的那样使用该值。

＆＃13;

$(document).ready(function () {
  $('.region').hide();
  $('#sr').change(function () {
    $(".region").hide();
    var region = $(this).find("option:selected").data("region");
    $('#'+region).show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="reports" id="sr">
  <option value="">Select Report...</option>
    <option value="avg" data-region="1">Average Sold</option>
    <option value="mma" data-region="1">Min|Max|Avg Sold</option>
    <option value="oh" data-region="2">On Hand Qty</option>
    <option value="mr" data-region="2">Money Report</option>
 </select>

<div id='1' class='region box box-primary'>
<p>Start Date: <input type="text" id="datepicker" name="startdate" ></p>
<p>End Date:   <input type="text" id="datepicker2" name="enddate"></p><input name="submit" type="submit"/>
</div>

<div id='2' class='region'>
  2
</div>

＆＃13;

jQuery选择使HTML DIV可见

1 个答案: