Default value in dropdown menu (JavaScript)

Question

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).

Do you mean you want the button for the selected option to be visible and the other two buttons to be hidden? If so, that's not how it should be done. There should be only one BUY button. — Mr Lister
– Mr Lister, Commented Oct 18, 2015 at 17:28

Marcos Pérez Gude · Accepted Answer · 2015-10-18 17:25:39Z

1

Why don't you make a selected property?

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

answered Oct 18, 2015 at 17:25

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Paul Vincent Over a year ago

Thank you. That was my first effort, but while it does change the value to "M", the BUY button remains corresponding to "S".

Sherali Turdiyev · Accepted Answer · 2015-10-18 20:21:15Z

0

Just use following snippets:

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>

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>

edited Oct 18, 2015 at 20:21

answered Oct 18, 2015 at 17:27

Sherali Turdiyev

1,75316 silver badges29 bronze badges

2 Comments

Paul Vincent Over a year ago

Thank you. This works great, but it does not affect the buy button. In this instance, when the page is loaded, "M" is in the dropbown, but "Button for size S" is still displayed.

Sherali Turdiyev Over a year ago

I suggest two way. 1.with jquery and 2. with pure javascript.

J Santosh · Accepted Answer · 2015-10-18 17:33:10Z

0

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';

answered Oct 18, 2015 at 17:33

J Santosh

3,8223 gold badges25 silver badges44 bronze badges

Comments

JACA_001 · Accepted Answer · 2015-10-18 17:45:48Z

0

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);

answered Oct 18, 2015 at 17:45

JACA_001

13 bronze badges

2 Comments

Paul Vincent Over a year ago

Thank you. This works in part -- but, in this instance, when the page is loaded, "M" is in the dropbown, but "Button for size S" (to reference the question) is still displayed.

JACA_001 Over a year ago

Why a button for each option? Could you handle a single button which you modified its label, according to the selected option.

JACA_001 · Accepted Answer · 2015-10-18 20:04:48Z

0

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());
}

edited Oct 18, 2015 at 20:04

answered Oct 18, 2015 at 19:46

JACA_001

13 bronze badges

Collectives™ on Stack Overflow

Default value in dropdown menu (JavaScript)

5 Answers 5

1 Comment

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related