CODEWITHSUNDEEP
javascriptjqueryhtmlcssdrop-down-menu
Paul Vincent
Paul Vincent

Reputation: 41

Default value in dropdown menu (JavaScript)

I wish to set the default value in a dropdown menu to the middle one (not the first).

I use dropdowns on my site for visitors to choose one of three / four / five sizes of a product.

The JavaScript is:

$(document).ready(function () {
    $('.group').hide();
    $('#option1').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('#'+$(this).val()).show();
    })
});

The other code is:

<select id="selectMe">
    <option value="option1">S</option>
    <option value="option2">M</option>
    <option value="option3">L</option>
</select>

User chooses a value, and then the BUY button changes accordingly. Thus ...

<div>
    <div id="option1" class="group">Button for size S</div>
    <div id="option2" class="group">Button for size M</div>
    <div id="option3" class="group">Button for size L</div>
</div>

This works great, but in this instance, I want M to be the default, and not S (there are three sizes here, but sometimes there are more).

Upvotes: 1

Views: 3253

Answers (5)

Sherali Turdiyev
Sherali Turdiyev

Reputation: 1743

Just use following snippets:

  1. With jQuery 

    $(document).ready(function () {
    var $select = $('#selectMe');

    $select.val("option2");//initial value
    $("[id=" + $select.val() + "]").show()
        .siblings().hide();

    $select.change(function () {
        $("[id=" + $select.val() + "]").show()
            .siblings().hide();
    });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="selectMe">
        <option value="option1">S</option>
        <option value="option2">M</option>
        <option value="option3">L</option>
    </select>

    <div>
        <div id="option1" class="group">Button for size S</div>
        <div id="option2" class="group">Button for size M</div>
        <div id="option3" class="group">Button for size L</div>
    </div>

  2. Or, You can do it through pure JavaScript 

    var selectBox = document.getElementById("selectMe")
selectBox.selectedIndex = parseInt(selectBox.length / 2);

selectBox.onchange = function () {
    changeButton(this.value);
}

changeButton(selectBox.value);

function changeButton(val) {
    console.log(val)
    var i = -1, elements = document.querySelectorAll('[class=group]');
    while (elements[++i]) {
        console.log(elements[i]);
        elements[i].style.display = (elements[i].id == val) ? "block" : "none";
    }
}
    <select id="selectMe">
    <option value="option1">S</option>
    <option value="option2">M</option>
    <option value="option3">L</option>
</select>

<div>
    <div id="option1" class="group">Button for size S</div>
    <div id="option2" class="group">Button for size M</div>
    <div id="option3" class="group">Button for size L</div>
</div>

Upvotes: 0

JACA_001
JACA_001

Reputation: 1

Try with one button:

HTML:

<select id="selectMe">
<option value="option1">S</option>
<option value="option2">M</option>
<option value="option3">L</option>
</select>
...
<div>
<div id="button-size" class="group">Button for size S</div>
</div>

jQuery:

var options = $('#selectMe option');
var total = options.length + ((options.length % 2 == 0) ? 0 : -1);
var value = $(options[total / 2]).val();
$('#selectMe').val(value);
changeButtonLabel(value);

$('#selectMe').on('change', function (evt)
{
    var value = $(this).val();
    changeButtonLabel(value);
});

function changeButtonLabel(value)
{
 $('#button-size').html('Button for size ' + $('#selectMe').find('option[value=' + value + ']').html());
}

Upvotes: 0

JACA_001
JACA_001

Reputation: 1

Try this:

var options = $('#selectMe option');
var total = options.length + ((options.length % 2 == 0) ? 0 : -1);
var value = $(options[total / 2]).val();
$('#selectMe').val(value);

Upvotes: 0

J Santosh
J Santosh

Reputation: 3847

You got 3 options

1.Using HTML selected property for the option you want. 

<select id="selectMe">
    <option value="option1">S</option>
    <option value="option2" selected>M</option>
    <option value="option3">L</option>
</select>

2.Using jQuery 

$('#selectMe').val('option2')

3.Using pure JS 

document.getElementById('selectMe').value = 'option2';

Upvotes: 0

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Why don't you make a selected property?

<option value="option2" selected>M</option>

Upvotes: 1

Related Questions