2

I have one dropdown on my html page and one button on that page. now I want to do something like thst when user click on button then dropdown will open.

Button:- 

 <a href="javascript:void(0);" id="84" class="add_award_ready"><i class="fa fa-plus"></i></a>

Dropdown:- 

<select id="instructor_student_award_id" name="instructor_student_award[id]">
 <option value="">Select</option>
 <option value="21">ss1</option>
 <option value="25">E++</option>
 <option value="26">F++</option>
 <option value="27">t1</option>
</select>

I tried this jquery code 

$('.add_award_ready').click(function(){
  student_id = $(this).attr('id');
  var element = $('#add_award_form_' + student_id + ' select')[0], worked = false;
    if (document.createEvent) {
        var e = document.createEvent("MouseEvents");
        e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        worked = element.dispatchEvent(e);
    } 
}

but this will works only once.If I clicked once again on button then dropdown does not opens. whats' going wrong?

thanks in advance.

sank
  • 964
  • 3
  • 12
  • 24

3 Answers3

1
        <div style="text-align: right;float:right;margin: 0;">
                <a id="OpenDialog" href="javascript:void(0)" onclick="aopen()" > <i class="fa fa-plus"></i> Add Policy</a>                        
              </div>
              <script>
    function aopen()
    {
        $("#dialog").dialog({modal: true, height: 500, width: 800 });
    }
    function close_popup()
    {
        //alert('HEllo');
        $("#dialog").dialog('close');            
    }
    </script>


    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

    <div id="dialog" title="Add Policy" style="display: none;" >
        <div class="box box-primary" >
            <!-- form start -->
            <form role="form" action="<?php echo site_url('policy/submit_data');?>" method="post">
              <div class="box-body">
                <div class="form-group">
                  <label for="exampleInputEmail1">Category Name</label>
                  <select class="form-control" name="category">
                        <option value=""> -- Category --</option>
                        <?php foreach($category as $value) {?>
                        <option value="<?php echo $value->cate_name; ?>"><?php echo $value->cate_name; ?></option> 
                        <?php } ?>
                  </select>

                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Sub Category</label>
                  <select class="form-control" name="sub_category">
                        <option value=""> -- SUB category --</option>
                        <?php foreach($sub_cate as $value) {?>
                        <option value="<?php echo $value->cate_id; ?>"><?php echo $value->sub_cate; ?></option> 
                        <?php } ?>
                  </select>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Description</label>
                  <div class='box-body pad'>
                        <textarea class="textarea" id="desc" name="description"  placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>                          
                    </div>
                  </div>
                </div>                    
              </div>
              <!-- /.box-body -->
              <div class="box-footer">
                <button type="submit" class="btn btn-primary">Submit</button>
                <button type="button" onclick="return close_popup();" class="btn btn-primary">Cancel</button>
              </div>
            </form>
          </div>
    </div>
user1685883
  • 74
  • 5
  • thanks for your answer but I m talking about dropdown where you mention about dialog. – sank Jul 13 '15 at 07:02
  • sank remove all field and save "select" tag on HTML. (this html code). use just click on button than call id=dialog. – user1685883 Jul 13 '15 at 07:15
0

Put the button and drop-down inside two different div tags like below provided with ids.

<div id="myButton">
<a href="javascript:void(0);" id="84" class="add_award_ready"><i class="fa fa-plus"></i></a>
</div>

<div id="mySelect">
<select id="instructor_student_award_id" name="instructor_student_award[id]">
 <option value="">Select</option>
 <option value="21">ss1</option>
 <option value="25">E++</option>
 <option value="26">F++</option>
 <option value="27">t1</option>
</select>
</div>

Then use the below script code

$("#mySelect").hide();
$("#myButton").click(function(e){
   $("#mySelect").toggle('slow');//or just show instead of toggle
});

Example Fiddle

Pavan
  • 33,316
  • 7
  • 50
  • 76
  • thank you. but I am not talking about toggle div.it's not working for. @Pavan – sank Jul 13 '15 at 09:47
  • @sank Can you update your post with drop-down code and button code? – Pavan Jul 13 '15 at 09:49
  • your above answer show and hide dropdown but that is not my question. I want exactly this http://jsfiddle.net/FVZkX/ but this will only work once after page refresh. but I want this on click of button.If I click on button and if dropdown is visible then it will hide and if it is hide then on click it shows dropdown but by default it open,I don't want to one more click on dropdown for selecting option from dropdown. Please help me. – sank Jul 13 '15 at 11:21
0

this is work for me. 

setTimeout(function(){
 var element = $('#add_award_form_' + student_id + ' select')[0], worked = false;
 if (document.createEvent) {
  var e = document.createEvent("MouseEvents");
  e.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  worked = element.dispatchEvent(e);
 } 
},100);

I used timeout because when I click on button again then mousedown event will not fire because it got 2 events so I delay one event. And its working exactly as I want.

sank
  • 964
  • 3
  • 12
  • 24