2012-09-27 16 views
8

Kullanım tıklandığında sanki otomatik olarak açıldığında, otomatik olarak açılmaya çalışıyorum. Mümkün mü?Vurgulu çalma kutusundaki tetikleme kutusunu tıklayın.

ben jQuery ile kolayca bu yapabileceğini düşünürdüm

...

$("#settings-select").mouseover(
    function(){ 
     $(this).trigger("click"); 
    } 
); 

Ama bu hiçbir şey yapmaz. Herhangi bir fikir? Yalnızca jQuery'nin bağlama işlevlerinden biriyle bağlanan işlevleri çağırır.

cevap

8

Sonunda işe koyuldum! Chosen; Başkalarının da işaret ettiği gibi, bunu kullanabilecek hiçbir etkinlik olmadığı için normal bir ile yapamazsınız. Ancak bu menü, menüyü açtığınızda, select mouseout'u açacak ve istediğim tam etki olan mouseout'u kapatacaktır.

HTML:

<select id="dropdown" data-placeholder="Choose&hellip;"> 
    <option value="one">Option 1</option> 
    <option value="two">Option 2</option> 
    <option value="three">Option 3</option> 
</select> 

JS:

$("#dropdown").chosen().next(".chzn-container").hover(
    function(){ 
     $("#dropdown").trigger("liszt:open"); 
    }, 
    function(){ 
     $(this).trigger("click"); 
    } 
); 

$("#dropdown").trigger("liszt:open"); menüsünü açar şeydir. Kapamak istediğinizde (bildiğim kadarıyla) tetiklemek için eşdeğer bir liszt:close olayı yoktur, ancak bunun yerine bir click'u tetiklemek aynı etkiye sahiptir.

+0

Teşekkür ederim. Ve daha zarif bir çözüm, $ ("# dropdown") değiştirmektir: tetikleyici ("liszt: open"); '' a ($) ($) (bu) .prev ('select'). Tetikleyici ("liszt: open") ; –

2

trigger

Orada javascript seçkin açmak için hiçbir çapraz tarayıcı yolu (o IE bazı sürümlerinde this.click() aramak mümkün olabilir ama test edemez, ve bunu hiçbir şekilde diğer yanda olduğuna eminim tarayıcılar).

+0

Eğer triggerHandler düşünüyorsunuz()? tetikleyici() ayrıca yerel etkinliği de tetikler. –

+0

Yerel olayı tetiklediğini düşünmüyorum.* "Hem düz nesneler hem de DOM nesneleri için, tetiklenen bir etkinlik adı nesnede bir özelliğin adıyla eşleşirse, jQuery, olay işleyicisi event.preventDefault()" * işlevini çağırmazsa, özelliği bir yöntem olarak çağırmaya çalışır. Bu farklı. –

+0

Ah, sağda, son cümlenin çivileri: Bir tıklama yönteminin seçilmemesi. –

0

Bu mümkün değil. Yalnızca kendi seçim kutunuzu veya Chosen eklentisini uygulayabilirsiniz, ancak bu kullanılabilirlik için kötüdür. Ayrıca trigger('focus')'u da düşünün.

+0

Aslında Chosen kullanıyorum. Bu daha kolay mı/mümkün mü? – daGUY

+0

Bu mümkün kılar, ancak daha kolay. Seçilen klasörden 'selectbox' ile' div' elementini değiştirdiğinizden, olayları manipüle edebilirsiniz. Seçilmiş muhtemelen kendi '_show()' ve '_hide()' fonksiyonuna sahiptir, bu nedenle $ (". Chzn-container") gibi bir şey vardır. Mouseover (unknown_chosen_function()); 'çalışabilir ya da olmayabilir :) – Turcia

+0

hm. ... işlevi "Chosen.prototype.results_show" olarak adlandırılıyor gibi görünüyor, ancak düzgün bir şekilde nasıl tetikleyeceğimi anlayamıyorum ... – daGUY

4

Bir süre oldu ama orada ben select uzunluğunu değiştirmek için hover kullanarak, burada görmüyorum bir çözümdür:

$('select').hover(function() { 

    $(this).attr('size', $('option').length); 
}, function() { 

    $(this).attr('size', 1); 
}); 

http://codepen.io/anon/pen/avdavQ

Ve burada biraz daha var, bir kalem çıplak gerekliliği ve daha bazı stil vardır:

Demo

+0

Çözümünüzü kullanarak bir değer eklemeyi denedim ama işe yaramıyor. – NineCattoRules

+0

Bunun ne anlama geldiğinden emin değilim, devam edebilmek için bana biraz daha fazla vermelisin ... – Shikkediel

+0

Demoyu kullanmaya çalış ve seçenekler için 'value = ...' seçeneğini kullan ... – NineCattoRules

0

Unfortun Bence Chosen ile yöntem - benim için çalışmadı.

Ama jQuery'de kendi seçicimi oluşturabileceğimi düşündüm.

HTML:

<div class='select'> 
    <p class='input'>Select option</p> 
    <input type='hidden' name='some_name_to_form' /> 
    <div class='hidden'> 
    <p value='id_1' >option long value</p> 
    <p value='id_2' >option 2</p> 
    <p value='id_3' >option 3</p> 
    </div> 
</div> 

JS:

$('.hidden p').click(function(){ 
    $(this).closest('.select').find('.input').text($(this).text()); 
    $(this).closest('.select').find('input').val($(this).attr('value')); 
    $(this).closest('.select').trigger("change"); 
}); 

$('.select').change(function(){ 
    // ... do stuff 
}); 

https://codepen.io/qwer643/pen/LebKpo

İlgili konular