用户在多个下拉列表中选择选项后显示按钮

时间:2016-05-28 09:58:22

标签: jquery

我想在用户在每个下拉列表中选择一个选项后显示按钮。 感谢您的帮助。

按钮

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

2 个答案:

答案 0 :(得分:0)

你的jQuery代码将是:

&#13;
&#13;
$('select').on('change', function() {
  var unselected = $('select').filter(function() {
    return this.selectedIndex <= 0;
  });
  if (unselected.length) return;
  $('.generate').show();
});
&#13;
.generate {
  display: none;
}
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我认为T J代码非常好,但您必须将空值作为首选,因为在页面加载时没有选择。

这是一个简单的jsfiddle: https://jsfiddle.net/mantisse_fr/72sp6vn4/

Ticket ID
127.0.0.1.2016-05-28.15-45-10.493c5f3c-e5f2-4034-8e82-69637b1fcc35

<type 'exceptions.SyntaxError'> invalid table/column name "size" is a "ALL" reserved SQL/NOSQL keyword

Version
web2py™ Version 2.12.1-stable+timestamp.2015.08.07.07.22.06

Traceback (most recent call last):
  File "C:\Users\sharankumar\Desktop\New\gluon\restricted.py", line 227, in restricted
    exec ccode in environment
  File "C:/Users/sharankumar/Desktop/New/applications/MyLogin/models/db.py", line 232, in <module>
    format='%(name)s')
  File "C:\Users\sharankumar\Desktop\New\gluon\packages\dal\pydal\base.py", line 817, in define_table
    table = self.lazy_define_table(tablename,*fields,**args)
  File "C:\Users\sharankumar\Desktop\New\gluon\packages\dal\pydal\base.py", line 834, in lazy_define_table
    table = table_class(self, tablename, *fields, **args)
  File "C:\Users\sharankumar\Desktop\New\gluon\packages\dal\pydal\objects.py", line 351, in __init__
    check_reserved(field_name)
  File "C:\Users\sharankumar\Desktop\New\gluon\packages\dal\pydal\base.py", line 519, in check_reserved_keyword
    'invalid table/column name "%s" is a "%s" reserved SQL/NOSQL keyword' % (name, backend.upper()))
SyntaxError: invalid table/column name "size" is a "ALL" reserved SQL/NOSQL keyword

代码在页面加载时使用hide functionnality完成,如果用户选择空值(页面加载需要)。