Wie auslösen Dropdown von Datenliste HTML mit jQuery

Question

Hier mein HTML ist:

<input type="text" name="" class="customize-input clickDp" list="dpA1" id="dropdown-Account"> 
<span class="show-dropdown"><img src="images/click-dp.png"></span> 
<datalist id="dpA1"> 
    <option value="1"/> 
    <option value="2"/> 
</datalist> 

Was ich will, ist die Drop-down zu zeigen, sobald ich die Spanne .show-dropdown klicken. Bisher hier ist mein Code:

$('.show-dropdown').on('click',function(){ 
    var e = $.Event("keydown"); 
    e.which = 40; // # Some key code value 
    e.keyCode = 40 
    $(".clickDp").trigger(e); 
    //$(".clickDp").trigger('keyup', [{preventDefault:function(){},keyCode:40}]); }) 

Answer 1

Ist das richtige gefunden? Hier habe ich ausgewählt. Möge dies dir helfen.

$('.show-dropdown').on('click',function(){ 
 

 
     var $target = $("#dpA1"); 
 
     var $clone = $target.clone().removeAttr('id'); 
 
     $clone.val($target.val()).css({ 
 
      overflow: "auto", 
 
      position: 'absolute', 
 
      'z-index': 999, 
 
      left: $target.offset().left, 
 
      top: $target.offset().top + $target.outerHeight(), 
 
      width: $target.outerWidth() 
 
     }).attr('size', $clone.find('option').length > 10 ? 10 : $clone.find('option').length).change(function() { 
 
      $target.val($clone.val()); 
 
     }).on('click blur keypress',function(e) { 
 
     if(e.type !== "keypress" || e.which === 13) 
 
      $(this).remove(); 
 
     }); 
 
     $('body').append($clone); 
 
     $clone.focus(); 
 

 
    
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://raw.githubusercontent.com/eduardolundgren/jquery-simulate/master/jquery.simulate.js"></script> 
 

 
<select id="dpA1"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 

 

 

 
<span class="show-dropdown"><img src="images/click-dp.png"></span>