Question

我正在使用php / mysql。我已经制作了一个表格，其中包含来自databse.now的课程下拉列表。我想在选择我的课程之一时显示div但是它不能以某种方式工作。请帮助我们。

以下是我的下拉代码：

<select name="coursetype" id='coursetype' required>
   <option value="" selected>Select Course Type</option>
   <option  value="UG" <?php if($student['coursetype']=='UG'){ ?> selected <?php }?>>4-Year BA (Hons.) Degree</option>
   <option value="PG" <?php if($student['coursetype']=='PG'){ ?> selected <?php }?>>2-Year PG Diploma</option>
   <option value="PGD" <?php if($student['coursetype']=='PGD'){ ?> selected <?php }?>>1-Year PG Prof. Diploma</option>
    <option value="MA" <?php if($student['coursetype']=='MA'){ ?> selected <?php }?>>2-Year MA Degree</option>
</select>

这是隐藏div的代码，我想在下拉列表中选择PG课程时打开第二个选项。

<div id="PG" class="group">
        <h3>9.  DECLARATION BY APPLICANT</h3>
</div>

请告诉我们伙伴们如何通过jquery / javascript实现它？

Answer 1

 $(document).ready(function(){
    $("#coursetype").on('change',function(){
        if($("#coursetype").val() == 'PG')
           $("#PG").show();
        else
            $("#PG").hide();
    });
  });

Answer 2

你可以尝试这样的事情 -

暂时将PG保持为隐藏状态，并在下拉列表更改时显示

$( "#coursetype" ).change(function() {
  if ( $("#coursetype").val() == "PG" )
  {
      $("#PG").show();
  }
  else
  {
      $("#PG").hide();
  }
});

Answer 3

使用js

用于显示您的元素

document.getElementById('your_element_id').style.display='block';

和

隐藏你的元素

document.getElementById('your_element_id').style.display='none';

Answer 4

   $("document").ready(function(){
       $("#PG").hide();
 $("#coursetype").change(function() {
    if( $(this).val()=="PG"){
         $("#PG").show();
      }else{
           $("#PG").hide();
      }

 }).trigger( "change" );
 });

仅在从下拉列表中选择任何值时显示隐藏的div不起作用

4 个答案: