觸發點擊懸停上的選擇框

我試圖讓一個select框在使用懸停在其上時自動彈出，就好像他們點擊了它一樣。這可能嗎？觸發點擊懸停上的選擇框

我想我可以用jQuery做到這一點很容易...

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

但是，什麼都不做。有任何想法嗎？

來源

2012-09-27 daGUY

我終於得到了這個工作！您需要Chosen;正如其他人指出的那樣，你不能用正常的select這樣做，因爲沒有可用的事件。但是，當鼠標懸停在select上並且在鼠標懸停時將其關閉時，這會彈出菜單，這是我想要的確切效果。

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");就是打開的菜單。當您想要關閉它時，沒有相應的liszt:close事件觸發（據我所知），但觸發click取而代之的效果相同。

來源

2012-10-01 15:31:48 daGUY

謝謝。更優雅的解決方案是改變'$（「＃dropdown」）。trigger（「liszt：open」）;'to'$（this）.prev（'select'）。trigger（「liszt：open」） ;' –

trigger只調用通過jQuery的某個綁定函數綁定的函數。

沒有跨瀏覽器方式打開從JavaScript中的選擇（它可能有可能呼籲IE的一些版本this.click()但我無法測試，我肯定沒有辦法在其他瀏覽器）。

來源

2012-09-27 13:19:01

你在想triggerHandler的（）？ trigger（）也觸發本地事件。 –

我不認爲它會引發本地事件。*「對於普通對象和DOM對象，如果觸發的事件名稱與對象的屬性名稱匹配，如果沒有事件處理程序調用event.preventDefault（）」*，jQuery將嘗試調用該屬性作爲方法。那不一樣。 –

啊，對了，你最後一句話指出：選擇沒有點擊方法。 –

這是不可能的。您只能實現您自己的選擇框或Chosen插件，但這對可用性不利。另外想想trigger('focus')。

來源

2012-09-27 13:22:12 Turcia

我正在使用Chosen，實際上。這是否使它更容易/可能？ – daGUY

這使得它成爲可能，但更容易。既然Chosen用'div'元素替換'selectbox'，你可以操縱事件。選擇可能有自己的'_show（）'和'_hide（）'函數，因此像'$（「.chzn-container」）。mouseover（unknown_chosen_function（））;''可能工作，或者不是:) – Turcia

hm。 ..該函數似乎被稱爲'Chosen.prototype.results_show'，但我無法弄清楚如何正確觸發它... – daGUY

這已經有一段時間，但有一個解決方案，我沒有看到這裏，使用hover改變select長度：

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

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

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

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

這裏還有一個豬圈裏它的多一點比裸必要性，並有一些造型：

Demo

來源

2015-09-15 18:04:04 Shikkediel

我試着用你的解決方案添加一個值，但它不起作用。 – NineCattoRules

不知道這意味着什麼，你不得不給我多一點去... – Shikkediel

嘗試使用你的演示，並插入'值= ...'爲您的選項 – NineCattoRules

Unfortun用選擇的方法 - 沒有爲我工作。

但我想我可以在jQuery上創建自己的選擇器。

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

來源

2018-01-04 17:22:25 user2725321

觸發點擊懸停上的選擇框

回答

相關問題