javascript - 多div id隐藏/显示Jquery

Question

我一直在尝试根据下拉菜单显示和隐藏 div。

我有 3 个隐藏的 div，但只有 2 个显示。问题是我必须为某些 div 提供多个 ID。作为手机的两个显示都很好，但 id="Handset Tablet"不会显示。我的 jquery 是否需要查看它是否只包含 id，因为我猜它只是在寻找“手机”而不是两个。

这是我的代码。我需要让所有 3 个 div 都带有手机显示，而平板电脑仅以某种方式显示共享的 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();
  })
});

尽管您可能只想一起上课，以避免将来出现困惑。

演示:http://jsfiddle.net/k2sxdh5s/7/