ユーザーが複数のドロップダウンでオプションを選択した後の表示ボタン

Question

ユーザーがすべてのドロップダウンリストでオプションを選択した後にボタンを表示したい。 ありがとうございました。

ボタン

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

ドロップダウンリスト

<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> 

Answer 1

あなたのjQueryのコードは、の線に沿って何かになります：

$('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>

Answer 2

私はTのJコードは非常に良いと思うが、ページの読み込み時に何も選択されていないので、最初の選択肢として空の値を入れなければならない。ページのロード時に隠すfunctionnalityで完了 https://jsfiddle.net/mantisse_fr/72sp6vn4/

// If an empty value is still selected, don't go further to show the generate button 
// and if the button was there, hide it. 
if (unselected.length!==0) { $(".generate").hide(); return; }; 

コードと、ユーザが空の値を選択した場合（ページのロードに必要）：

は簡単なjsfiddleあります。