düğmesi tıklandığında seçim listesini genişletmek ve

Question

ben normal seçme listesi var seçmek gizlemek ve ben istiyorum:

1. butonuna bunu Expand, yani çalışma ve düğme kadar
2. Tut gizli seçim listesini yapılır tıklandı.
3. Seçenekleri onclick olayı olarak listelemek istiyorum.

Herhangi bir fikir ve önerileriniz lütfen?

showDropdown = function (element) { 
 
    var event; 
 
    event = document.createEvent('MouseEvents'); 
 
    event.initMouseEvent('mousedown', true, true, window); 
 
    element.dispatchEvent(event); 
 
}; 
 

 
window.runThis = function() { 
 
    var dropdown = document.getElementById('dropdown'); 
 
    showDropdown(dropdown); 
 
};

<select id="dropdown"> 
 
    <option value="Red">Red</option> 
 
    <option value="Green">Green</option> 
 
    <option value="Blue">Blue</option> 
 
</select> 
 
<br> 
 
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>

Alternatif adndroi ve ios cihazlarda spinner olarak yanıt seç liste yapmanın en iyi yolu nedir?

GÜNCELLEME

şimdi çalışıyor Beni bu parçası olarak şimdi Question güncellestirelim:

function get_tables_restaurant(){ 
     if($result2 = $this->db->query('SELECT * FROM fandb_tables ORDER BY title ASC')){ 


    $return .= '<div class="lineheight"><button id="fire" type="button" class="add_table">+</button></div> 
    <select id="dropdown">'; 
     while($r2 = $result2->fetch_object()){ 

     $return .= '<option value="'.htmlspecialchars($r2->title).'">'.htmlspecialchars($r2->title).'</option>'; 


     } 
     $return .= '</select>'; 
     $return .= '<div id="test2" style="display: none;"> 
<h4>Table '.htmlspecialchars($r2->title).'</h4> 
     <form method="post" action=""> 
      <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/> 
      <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/> 
      <input type="hidden" name="title" size="50" value="1"/> 
      <input type="submit" value="STARTER" class="starter"/> 
     </form> 
     <form method="post" action=""> 
      <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/> 
      <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/> 
      <input type="hidden" name="title" size="50" value="2"/> 
      <input type="submit" value="MAIN COURSE" class="maincourse"/> 
     </form> 
     <form method="post" action=""> 
      <input type="hidden" name="area" size="50" value="'.htmlspecialchars($r2->area).'"/> 
      <input type="hidden" name="tableno" size="50" value="'.htmlspecialchars($r2->title).'"/> 
      <input type="hidden" name="title" size="50" value="3"/> 
      <input type="submit" value="DESSERT" class="dessert"/> 
     </form> 
     <button onclick="$(\'#test2\').popup(\'hide\');" id="dismiss">DISMISS</button> 
</div>'; 
     } 

yüzden şimdi sıra bireysel değerlerle test2 id div olan açılır pencere göstermek gerekir her seçenek için Yukarıdaki örnekte.

Bunun, bu while döngüsünün içinde olması gerektiğini anlıyorum, ancak bu <div id="test2>...</div> döngüsünün içine yerleştirir koymaz hiç çalışmaz.

Lütfen sizden tavsiye isteyebilir misiniz?

SORTED!

:) Okurken bit ve

$("#dropdown").change(function() { 
     var element = document.getElementById('dropdown'); 
    $('#test2'+element.value).popup('show'); 

herkesin yardım :) CSS bulunan açılır için display: none ayarlayın ve bir .show sınıf yapabilir

Answer 1

için teşekkür ederiz :) bitmiş söylediği gibi düğmesine tıklandığında, display: inline-block ile açılır.

Bunun için jQuery's .addClass() ve .click() işlevlerine bir göz atın.

DÜZENLEME: cevap from here kısmını kullanarak, ben senin jsFiddle düzenlendi: https://jsfiddle.net/sqp2xej5/13/

Answer 2

Bu

showDropdown = function (element) { 
 
    var event; 
 
    event = document.createEvent('MouseEvents'); 
 
    event.initMouseEvent('mousedown', true, true, window); 
 
    element.dispatchEvent(event); 
 
}; 
 

 
window.runThis = function() { 
 
    var dropdown = document.getElementById('dropdown'); 
 
    showDropdown(dropdown); 
 
}; 
 

 
$('#reload').click(function(){ 
 
    $('#dropdown').click(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="dropdown"> 
 
    <option value="Red">Red</option> 
 
    <option value="Green">Green</option> 
 
    <option value="Blue">Blue</option> 
 
</select> 
 
<br> 
 
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button> 
 
<button id="reload" type="button">Hide dropdown items</button>