HTML'deki bu açılır liste için:

<select id="countries">
<option value="1">Country</option>
</select>

Listeyi açmak istiyorum (üzerine sol tıklamakla aynı). Bu JavaScript (veya daha spesifik olarak jQuery) kullanılarak mümkün müdür?

Bir öğeye yapılan tıklamayı kolayca simüle edebilirsiniz , ancak bir öğeye tıklama <select>açılır menüyü açmaz.

Birden çok seçim kullanmak sorunlu olabilir. Belki de, gerektiğinde genişletip daraltabileceğiniz bir kap elemanının içindeki radyo düğmelerini düşünmelisiniz.

Ben de aynı şeyi bulmaya çalışıyordum ve hayal kırıklığına uğradım. Seçim kutusunun öznitelik boyutunu değiştirdim, böylece açılır gibi görünüyor

$('#countries').attr('size',6);

ve sonra bitirdiğinde

$('#countries').attr('size',1);

Aynı problemle karşılaştım ve bir çözümüm var. ExpandSelect () adı verilen ve "select" öğesine fare tıklamasını taklit eden bir işlev, bunu <select>, kesinlikle konumlandırılmış ve sizeözniteliği ayarlayarak aynı anda birden çok seçeneğin görülebildiği başka bir öğe oluşturarak yapar . Tüm büyük tarayıcılarda test edilmiştir: Chrome, Opera, Firefox, Internet Explorer. Nasıl çalıştığının açıklaması ve buradaki kod:

Düzenle (bağlantı kesildi) .

Google Code'da bir proje oluşturdum, oradaki koda gidin:

http://code.google.com/p/expandselect/

Ekran görüntüleri

Tıklamayı taklit ederken GUI'de küçük bir fark var, ancak bu gerçekten önemli değil, kendiniz görün:

Fare tıklandığında:

_{(kaynak: googlecode.com )}

Tıklamayı taklit ederken:

_{(kaynak: googlecode.com )}

Projenin web sitesinde daha fazla ekran görüntüsü, yukarıdaki bağlantı.

Bu, hemen yukarıdaki cevaplardan şekillenmiştir ve gerçekte kaç seçenek olduğuna uymak için seçeneklerin uzunluğunu / sayısını kullanır.

Umarım bu, birinin ihtiyaç duyduğu sonuçları elde etmesine yardımcı olur!

    function openDropdown(elementId) {
        function down() {
            var pos = $(this).offset(); // remember position
            var len = $(this).find("option").length;
                if(len > 20) {
                    len = 20;
                }

            $(this).css("position", "absolute");
            $(this).css("zIndex", 9999);
            $(this).offset(pos);   // reset position
            $(this).attr("size", len); // open dropdown
            $(this).unbind("focus", down);
            $(this).focus();
        }
        function up() {
            $(this).css("position", "static");
            $(this).attr("size", "1");  // close dropdown
            $(this).unbind("change", up);
            $(this).focus();
        }
        $("#" + elementId).focus(down).blur(up).focus();
    }

Bu, bunu kapsamalıdır:

 var event;
 event = document.createEvent('MouseEvents');
 event.initMouseEvent('mousedown', true, true, window);
 countries.dispatchEvent(event); //we use countries as it's referred to by ID - but this could be any JS element var

Bu, örneğin bir tuşa basma olayına bağlanabilir, böylece öğe odaklandığında kullanıcı yazabilir ve otomatik olarak genişler ...

- Bağlam--

  modal.find("select").not("[readonly]").on("keypress", function(e) {

     if (e.keyCode == 13) {
         e.preventDefault();
         return false;
     }
     var event;
     event = document.createEvent('MouseEvents');
     event.initMouseEvent('mousedown', true, true, window);
     this.dispatchEvent(event);
 });

Basit, kolay bir yol.

function down(what) {
  pos = $(what).offset();  // remember position
  $(what).css("position","absolute");
  $(what).offset(pos);   // reset position
  $(what).attr("size","10"); // open dropdown
}

function up(what) {
$(what).css("position","static");
$(what).attr("size","1");  // close dropdown
}

Artık DropDown'ınızı aynen böyle çağırabilirsiniz

<select onfocus="down(this)" onblur="up(this)">

Benim için mükemmel çalışıyor.

Belki daha iyi, çünkü sayfadaki diğer öğelerin konumuyla ilgili hiçbir probleminiz yok.

function down(was) {
a = $(was).clone().attr('id','down_man').attr('disabled',true).insertAfter(was);
$(was).css("position","absolute").attr("size","10");
}

function up(was) {
$('#down_man').remove();
$(was).css("position","static");
$(was).attr("size","1");
}

Kimliği sabit bir değere değiştirin mybe akıllı değil ama umarım fikri görürsünüz.

JavaScript'in bir öğeye "tıklaması" mümkün değildir (ekli onclick etkinliği , ancak onu tam anlamıyla tıklayamazsınız)

Listedeki tüm öğeleri görüntülemek için, listeyi bir multipleliste yapın ve aşağıdaki gibi boyutunu artırın:

<select id="countries" multiple="multiple" size="10">
<option value="1">Country</option>
</select>

Hayır yapamazsın.

Boyutu büyütmek için değiştirebilirsiniz ... Dreas fikrine benzer şekilde, ancak değiştirmeniz gereken boyut budur.

<select id="countries" size="6">
  <option value="1">Country 1</option>
  <option value="2">Country 2</option>
  <option value="3">Country 3</option>
  <option value="4">Country 4</option>
  <option value="5">Country 5</option>
  <option value="6">Country 6</option>
</select>

Mrperfect'in cevabını kullanmayı denedim ve birkaç sorunum oldu. Birkaç küçük değişiklikle, benim için çalışmasını sağlayabildim. Sadece bir kez yapacak şekilde değiştirdim. Açılır listeden çıktığınızda, normal açılır menü yöntemine geri döner.

function down() {
    var pos = $(this).offset(); // remember position
    $(this).css("position", "absolute");
    $(this).offset(pos);   // reset position
    $(this).attr("size", "15"); // open dropdown
    $(this).unbind("focus", down);
}
function up() {
    $(this).css("position", "static");
    $(this).attr("size", "1");  // close dropdown
    $(this).unbind("change", up);
}
function openDropdown(elementId) {
    $('#' + elementId).focus(down).blur(up).focus();
}

Bunun cevap vermediği bir şey, beden = n ayarını yaptıktan ve mutlak konumlandırmayı yaptıktan sonra seçim listesindeki seçeneklerden birine tıkladığınızda ne olacağıdır.

Bulanıklaştırma olayı onu boyut = 1 yaptığından ve tekrar göründüğü gibi değiştirdiğinden, bunun gibi bir şeye de sahip olmalısınız

$("option").click(function(){
    $(this).parent().blur();
});

Ayrıca, diğer öğelerin arkasında gösterilen mutlak konumlandırılmış seçim listesiyle ilgili sorunlar yaşıyorsanız, bir

z-index: 100;

veya bunun gibi seçim tarzında bir şey.

Çok basit:

var state = false;
$("a").click(function () {
    state = !state;
    $("select").prop("size", state ? $("option").length : 1);
});

Belirtildiği gibi, programlı olarak açamazsınız <select> JavaScript kullanarak .

Bununla birlikte, <select>tüm görünümü yöneterek kendi yazabilirsiniz ve kendinizi hissedebilirsiniz. Google veya Yahoo!' da otomatik tamamlama arama terimleri için gördüklerinize benzer bir şey ! veya The Weather Network'teki Konum Ara kutusu .

Burada jQuery için bir tane buldum . İhtiyaçlarınızı karşılayıp karşılamayacağına dair hiçbir fikrim yok, ancak ihtiyaçlarınızı tam olarak karşılamasa bile, onu başka bir eylem veya olayın sonucu olarak açılacak şekilde değiştirmek mümkün olmalı. Bu aslında daha umut verici görünüyor.

yeni ekledim

select = $('#' + id);
length = $('#' + id + ' > option').length;
if (length > 20)
    length = 20;
select.attr('size', length);
select.css('position', 'absolute');
select.focus();

ve seçime ekleyin

onchange="$(this).removeAttr('size');"
onblur="$(this).removeAttr('size');"

klasik olanla aynı görünümü elde etmek için (html'nin geri kalanıyla örtüşmek)

Belki geç, ama ben bunu böyle çözdüm : http://jsfiddle.net/KqsK2/18/

$(document).ready(function() {
  fixSelect(document.getElementsByTagName("select"));
                      });                       

   function fixSelect(selectList)
            {
            for (var i = 0; i != selectList.length; i++)
              {

                 setActions(selectList[i]);
              }
            }


   function setActions(select)
            {
               $(select).click(function() {
                   if (select.getElementsByTagName("option").length == 1)
                        {
                          active(select);
                        }
                      });
                $(select).focus(function() {
                       active(select);
                       });
                $(select).blur(function() {
                       inaktiv(select);
                       });
                $(select).keypress(function(e) {
                      if (e.which == 13) {

                      inaktiv(select);
                          }
                       });
                  var optionList = select.getElementsByTagName("option");

                  for (var i = 0; i != optionList.length; i++)
                           {
                                setActionOnOption(optionList[i], select);
                           }
      }

  function setActionOnOption(option, select)
      {
                    $(option).click(function() {
                                inaktiv(select);
                        });
      }

  function active(select)
      {
          var temp = $('<select/>');
              $('<option />', {value: 1,text:$(select).find(':selected').text()}).appendTo(temp);
               $(temp).insertBefore($(select));

              $(select).attr('size', select.getElementsByTagName('option').length);
              $(select).css('position', 'absolute');
              $(select).css('margin-top', '-6px');
              $(select).css({boxShadow: '2px 3px 4px #888888'});



                        }

        function inaktiv(select)
                   {
                 if($(select).parent().children('select').length!=1)
                     {
                                             select.parentNode.removeChild($(select).parent().children('select').get(0));
                                }
                $(select).attr('size', 1);
                $(select).css('position', 'static');
                $(select).css({boxShadow: ''});
                $(select).css('margin-top', '0px');

                  }