Question

我希望将下拉菜单中的默认值设置为中间值（不是第一个）。

我在我的网站上使用下拉菜单，供访问者选择三种/四种/五种尺寸的产品中的一种。

JavaScript是：

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

其他代码是：

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

这很好用，但在这个例子中，我希望M是默认值，而不是S（这里有三种尺寸，但有时还有更多）。

Answer 1

为什么不制作False财产？

selected

Answer 2

只需使用以下代码段：

使用jQuery

＆＃13;

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

＆＃13;

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

＆＃13;

或者，你可以通过纯JavaScript来实现

＆＃13;

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";
    }
}

＆＃13;

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

＆＃13;

Answer 3

你有3个选择

1.使用HTML selected属性作为您想要的选项。

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

2.使用jQuery

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

3.使用纯JS

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

Answer 4

试试这个：

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

Answer 5

尝试使用一个按钮：

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

下拉菜单中的默认值（JavaScript）

5 个答案: