Nadir Nadir - 6 months ago 15
jQuery Question

display button after user choose options in multiple dropdown

I want to display button after user chooses an option in every dropdown list.
Thank's for your help.

Button

<button class="generate">Generate iframe</button>


Dropdown lists

<form id="video_selection">
<select id="select_video1" onchange="changeVideo1()">
<option>Vidéo 1</option>
<?php
foreach($id as $video1)
{
$videoId1 = $video1['id'];
$videoLink1 = $video1['link'];
?>
<option id="video1_iframe" value="<?php echo $videoLink1;?>"><?php echo $videoLink1;?></option>
<?php
}
?>
</select>
<select id="select_video2" onchange="changeVideo2()">
<option>Vidéo 2</option>
<?php
foreach($id2 as $video2)
{
$videoId2 = $video2['id'];
$videoLink2 = $video2['link'];
?>
<option id="video2_iframe" value="<?php echo $videoLink2;?>"><?php echo $videoLink2;?></option>
<?php
}
?>
</select>
</form>

T J T J
Answer

Your jQuery code will be something along the lines of:

$('select').on('change', function() {
  var unselected = $('select').filter(function() {
    return this.selectedIndex <= 0;
  });
  if (unselected.length) return;
  $('.generate').show();
});
.generate {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>
<select>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>
<select>
  <option value="1">First</option>
  <option value="2">Second</option>
  <option value="3">Third</option>
  <option value="4">Fourth</option>
</select>
<button class="generate">Generate iframe</button>