Question

我一直试图根据下拉列表显示和隐藏div。

我有3个隐藏的div但只有2个显示。问题是我必须有一些div的多个ID。两个显示器作为手机是好的但id =“手机平板电脑”将不会显示。我的jquery是否需要查看它是否只包含id，因为我猜它只是在寻找“Handset”而不是两个。

这是我的代码。我需要拥有所有3个div与手机节目和平板电脑只能以某种方式显示共享。 http://jsfiddle.net/jonasj/k2sxdh5s/

   <div class="form-group"><label class="col-md-3 control-label">Product Type</label>
        <div class="col-md-9">
        <select name="product_type" id="product_type" class="form-control check_record">
                <option selected value="0" >-Select Product Type-</option>
                <option value="Handset">Handset</option>
                <option value="Tablet" >Tablet</option>
        </select>
        </div>
    </div>




        <div id="Handset" class="hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
        <div class="col-md-9">
            <select class="form-control" name="spec">
                <option selected value="" disbaled>- Device Spec -</option>
            </select>
        </div>
        </div>

        <div id="Handset" class="hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
        <div class="col-md-9">
            <select class="form-control" name="device_capacity">
                <option selected disabled value="">- Select Device Capacity -</option>
                <option value="2GB">2GB</option>
                <option value="4GB">4GB</option>
                <option value="8GB">8GB</option>
                <option value="16GB">16GB</option>
                <option value="32GB">32GB</option>
                <option value="64GB">64GB</option>
                <option value="128GB">128GB</option>
                <option value="256GB">256GB</option>
                <option value="Unknown">Unknown</option>
            </select>
        </div>
        </div>

        <div id="Handset Tablet" class="hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
        <div class="col-md-9">
            <select class="form-control" name="device_sim">
                <option selected disabled value="">- Select Device Sim Status -</option>
                <option value="Sim Free">Sim Free</option>
                <option value="Network Locked">Network Locked</option>
                <option value="Network Unlocked">Network Unlocked</option>
                <option value="Unknown">Unknown</option>
            </select>
        </div>
        </div>    




<script>
$(document).ready(function () {
  $('.hide_listing').hide();
  $('').show();
  $('#product_type').change(function () {
    $('.hide_listing').hide();
    $('div#'+$(this).val()).show();
  })
});
</script>

Answer 1

由于ID是唯一的，您可以使用类来实现您想要的目标：

     <div class="form-group"><label class="col-md-3 control-label">Product Type</label>
    <div class="col-md-9">
    <select name="product_type" id="product_type" class="form-control check_record">
            <option selected value="0" >-Select Product Type-</option>
            <option value="Handset">Handset</option>
            <option value="Tablet">Tablet</option>
    </select>
    </div>
</div>




    <div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
    <div class="col-md-9">
        <select class="form-control" name="spec">
            <option selected value="" disbaled>- Device Spec -</option>
        </select>
    </div>
    </div>

    <div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
    <div class="col-md-9">
        <select class="form-control" name="device_capacity">
            <option selected disabled value="">- Select Device Capacity -</option>
            <option value="2GB">2GB</option>
            <option value="4GB">4GB</option>
            <option value="8GB">8GB</option>
            <option value="16GB">16GB</option>
            <option value="32GB">32GB</option>
            <option value="64GB">64GB</option>
            <option value="128GB">128GB</option>
            <option value="256GB">256GB</option>
            <option value="Unknown">Unknown</option>
        </select>
    </div>
    </div>

    <div class="Handset Tablet hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
    <div class="col-md-9">
        <select class="form-control" name="device_sim">
            <option selected disabled value="">- Select Device Sim Status -</option>
            <option value="Sim Free">Sim Free</option>
            <option value="Network Locked">Network Locked</option>
            <option value="Network Unlocked">Network Unlocked</option>
            <option value="Unknown">Unknown</option>
        </select>
    </div>
    </div>

并更改您的功能以包含类：

$(document).ready(function () {
  $('.hide_listing').hide();
  $('#product_type').change(function () {
  $('.hide_listing').hide();
  $('div.'+$(this).val()).show();
  })
});

虽然你可能想要一起上课，以避免将来混淆。

DEMO：http://jsfiddle.net/k2sxdh5s/7/

Answer 2

将其设为HTML

    <div class="form-group"><label class="col-md-3 control-label">Product Type</label>
    <div class="col-md-9">
    <select name="product_type" id="product_type" class="form-control check_record">
            <option selected value="0" >-Select Product Type-</option>
            <option value="Handset">Handset</option>
            <option value="Tablet" >Tablet</option>
    </select>
    </div>
</div>




    <div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Spec</label>
    <div class="col-md-9">
        <select class="form-control" name="spec">
            <option selected value="" disbaled>- Device Spec -</option>
        </select>
    </div>
    </div>

    <div class="Handset hide_listing form-group"><label class="col-md-3 control-label">Capacity</label>
    <div class="col-md-9">
        <select class="form-control" name="device_capacity">
            <option selected disabled value="">- Select Device Capacity -</option>
            <option value="2GB">2GB</option>
            <option value="4GB">4GB</option>
            <option value="8GB">8GB</option>
            <option value="16GB">16GB</option>
            <option value="32GB">32GB</option>
            <option value="64GB">64GB</option>
            <option value="128GB">128GB</option>
            <option value="256GB">256GB</option>
            <option value="Unknown">Unknown</option>
        </select>
    </div>
    </div>

    <div class="Handset Tablet hide_listing form-group"><label class="col-md-3 control-label">Sim Status</label>
    <div class="col-md-9">
        <select class="form-control" name="device_sim">
            <option selected disabled value="">- Select Device Sim Status -</option>
            <option value="Sim Free">Sim Free</option>
            <option value="Network Locked">Network Locked</option>
            <option value="Network Unlocked">Network Unlocked</option>
            <option value="Unknown">Unknown</option>
        </select>
    </div>
    </div>

并将其作为jquery

    $(document).ready(function () {
  $('.hide_listing').hide();
  $('#product_type').change(function () {
    $('.hide_listing').hide();
    var show_div = $(this).val();
      if(show_div == "Handset") {
          $(".Handset").show();
      } else if (show_div == "Tablet") {
          $(".Tablet").show();
      }
  })
});

这将使其有效......当然

Multi div id hide / show Jquery

2 个答案: