Hide div , when default option is chosen-CodePudding

I'm currently trying to do a selection with three options: -The first, is the default one. -the 2nd option displays inputs, -and the 3rd other inputs

My problem is: that when I choose the second or the third option, my inputs change, so that's good. But when I select the default one, my inputs that were previously selected do not disappear.

There is my code snippet:

$(document).ready(function() {
    $('#bat').change(function() {
        $($(this).children("option:selected").attr("data-hide")).hide();
        $($(this).children("option:selected").attr("data-show")).show();
     $($(this).children("option[value=1]").attr("data1")).hide();
     $($(this).children("option[value=1]").attr("data2")).hide();
    });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="bat" name="card_name" >
    <option data1='#access' data2='#amount' value="1">--Veuillez choisir une option--</option>
    <option data-hide='#access' data-show='#amount' value="A">Fichier separes : plusieurs fichiers de une page
    </option>
    <option data-hide='#amount' data-show='#access' value="B">Fichier multipages : 1 fichier de plusieurs pages
    </option>
</select>

<div id="access">div 1</div>
<div id="amount">div 2</div>

CodePudding user response：

You can use the same method as you used before and create a div around both options:

$(document).ready(function() {
    $('#bat').change(function() {
      $('#results').show()
      $($(this).children("option:selected").attr("data-hide")).hide();
      $($(this).children("option:selected").attr("data-show")).show();
    });
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="bat" name="card_name" >
          <option data-hide='#results' data1='#access' data2='#amount' value="1">--Veuillez choisir une option--</option>
          <option data-hide='#access' data-show='#amount' value="A">Fichier separes : plusieurs fichiers de une page
          </option>
          <option data-hide='#amount' data-show='#access' value="B">Fichier multipages : 1 fichier de plusieurs pages
          </option>
        </select>
<div id="results">
<div id="access" style="display:none;">div 1</div>
<div id="amount" style="display:none;">div 2</div>
</div>

CodePudding user response：

Both Hide and show occur simultaneously that's why when you select the default option value both div do not show. Just pull up below two lines of code it will work fine. I keep your HTML as it was

  $(document).ready(function() {
    $('#bat').change(function() {          
    $($(this).children("option:selected").attr("data2")).show();
    $($(this).children("option:selected").attr("data1")).show();

    $($(this).children("option:selected").attr("data-hide")).hide();
    $($(this).children("option:selected").attr("data-show")).show();
    });
})