Search code examples
javascriptjqueryhtmldrop-down-menuhtml-select

How to use jQuery to select a dropdown option?


I was wondering if it’s possible to get jQuery to select an <option>, say the 4th item, in a dropdown box?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

I want the user to click a link, then have the <select> box change its value, as if the user has selected it by clicking on the <option>.


Solution

  • How about

    $('select>option:eq(3)').attr('selected', true);
    

    Example:

    $('select>option:eq(3)').attr('selected', true);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>


    for modern versions of jquery you should use the .prop() instead of .attr()

    $('select>option:eq(3)').prop('selected', true);
    

    Example:

    $('select>option:eq(3)').prop('selected', true);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>