2014-02-25 69 views
1

我有幾個連續的選擇元素,用戶必須選擇一個選項。我試圖爲方便用戶做,以確保他們選擇了一個選項會自動打開下一個選擇後一個選項已經被拾取在選擇變更時打開下一個選擇元素

小提琴http://jsfiddle.net/zYUfd/1/

HTML

<form> 
    <select name="first"> 
     <option value=""></option> 
     <option value="1">one</option> 
     <option value="2">two</option> 
     <option value="3">three</option> 
    </select> 
    <select name="two"> 
     <option value=""></option> 
     <option value="1">one</option> 
     <option value="2">two</option> 
     <option value="3">three</option> 
    </select> 
    <select name="three"> 
     <option value=""></option> 
     <option value="1">one</option> 
     <option value="2">two</option> 
     <option value="3">three</option> 
    </select> 
</form> 

jquery

$('select').on('change', function() { 
    $('.select').next().trigger('click'); 
}); 
+1

總之,你可以「T。請參閱:http://stackoverflow.com/questions/249192/how-can-you-programmatically-tell-an-html-select-to-drop-down-for-example-due – Kolby

+0

你嘗試使用$(this) .next()而不是$('。select')。next() –

回答

1

工作演示http://jsfiddle.net/4cgt3/http://jsfiddle.net/4cgt3/3/

老這麼參考:Open a select drop down on click of checkbox using jquery

希望這會適合您的需要:)

代碼

$('select').on('change', function() { 

    'use strict'; 
     $(this).next().focus().get(0).dispatchEvent(doClick()); 

}); 

var doClick = function() { 
    'use strict'; 
    var event = document.createEvent('MouseEvents'); 
    event.initMouseEvent('mousedown', true, true, window); 
    return event; 
} 
+1

對於這是不可能的,這幾乎完美的作品,但每一個下降到第二個菜單,(選擇第二個選項後,它不會移動到第三個)。但是這可能足以讓我玩弄。謝謝 – user934902

+1

saweet,固定的,更流暢的版本在這裏:http://jsfiddle.net/4cgt3/3/':)'很高興幫助! –

+1

它是那裏的繁榮,你是一個天才我的男人只有戒菸者說不可能有什麼東西 – user934902

0

我不認爲這是可能的。您需要使用自定義選擇小部件來完成此跨瀏覽器

+2

你的domo不工作(firefox) –

+1

它確定它沒有跨瀏覽器,它不是一個基本的功能,但它使得用戶更容易生病在任何瀏覽器上都可以使用它 – user934902

+0

但是,一致性很好。 –