Question

我是jquery的新手我想要在选择下拉列表的特定元素时隐藏特定的分区，我还想在特定隐藏时增加adjasent列的大小

＆＃13;

$(function() {
    $('#d1').change(function() {
        $('#group3').hide();
        $('#' + $(this).val()).show();
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group1" id="d1">
    <select class="cls1">
        <option value="">Type</option>
        <option value="QS">1</option>
        <option value="SP">2</option>
        <option value="XL">3</option>
    </select>
</div>

<div class="div2">
    <div class="group2" , width="50%">
        Division2: Hide when 3 is selected
    </div>

    <div class="group3" , width="50%">
        Hide when 1 or 2 is selected
    </div>
</div>

＆＃13;

但每次隐藏分组group3如何更改它以便根据我的选择隐藏不同的分区

Answer 1

首先，你需要给你想要隐藏在JS中的所有组，一个主类名（groupclass），如下所示：

<div class="group1" id="d1">
    <select class="cls1">
        <option value="">Type</option>
        <option value="QS">1</option>
        <option value="SP">2</option>
        <option value="XL">3</option>
    </select>
</div>

<div class="div2">
    <div class="group2 groupclass" , width="50%">
        Division2: Hide when 3 is selected
    </div>
    <div class="group3 groupclass" , width="50%">
        Hide when 1 or 2 is selected
    </div>
</div>

然后你需要在JS中说，首先隐藏所有并显示如下所选的组：

<script>
    $('#d1 > select').change(function() {
        $('.groupclass').hide();
        $('.group' + $('option:selected', this).text()).show();
    });
</script>

Answer 2

你去吧

$d1 = $('#d1');
$d1.change(function() {
  $("[id^=group]").show();
  var value = $d1.val();
  if (value === "QS" || value === "SP") {
    $('#group3').hide();
  } else if (value === "XL") {
    $('#group2').hide();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group1">
  <select class="cls1" id="d1">
    <option value="">Type</option>
    <option value="QS">1</option>
    <option value="SP">2</option>
    <option value="XL">3</option>
  </select>
</div>

<div class="div2">
  <div id="group2" style="width:50%">
    Division2: Hide when 3 is selected
  </div>

  <div id="group3" style="width:50%">
    Hide when 1 or 2 is selected
  </div>
</div>

Answer 3

您可以尝试以下，

＆＃13;

$(function() {    

    $('#d1').change(function(){
    
        
     		var selected_valule  = $("#d1").val();
       	console.log(selected_valule);
        if(selected_valule == "XL" ){
        		$('#group3').hide();
            $('#group2').show();
        }else{
        		$('#group2').hide();
            $('#group3').show();
        }
      
        
    });

    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group1" >
     <select class="cls1" id="d1">
     <option value="">Type</option>
     <option value="QS">1</option>
     <option value="SP">2</option>
     <option value="XL">3</option>
     </select>
 </div>

<div class="div2">
<div id="group2" style="width:50%">
 Division2: Hide when 3 is selected
</div>


<div id="group3" style="width:50%">
 Hide when 1 or 2 is selected
</div>
</div>

＆＃13;

如何为以下内容编写jquery

3 个答案: