如何 select 下拉列表中的给定选项

Question

我有一个下拉菜单

<select id="ddl1">
    <option value="0">number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

现在我正在做的是，只要用户点击 ddl1，我就会将其默认值更改为 4，就像这样

$(function () {

    var defaultValue = "4";

    $('#ddl1').click(function () {
        var select_val = $('#ddl1').val();

        if (select_val == "0")
            $('#ddl1').val(defaultValue);
    });
});

但现在的问题是当用户尝试 select 下拉菜单的默认选项即 number 时，选项 4 被 select 编辑。有什么解决办法吗？

问题是当用户点击下拉菜单时 -> 选项 4 必须 selected 而当用户点击选项 number -> 选项 number必须 selected 而不是选项 4.

Answer 1

您应该在 change 上调用此函数，而不是 click - 否则，如您所说，只要您单击一个选项就被选中。

$('#ddl1').change(function () {

DEMO

编辑：您应该使用 class 来提供默认选项的感觉，您实际上不希望在用户每次单击时将其设置为选中：

<select id="ddl1">
    <option value="0">number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4" class="default">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

.default {
    color: blue;
}

Answer 2

这是您要找的吗？ http://jsfiddle.net/swm53ran/84/

$(function () {
    var defaultValue = "4";
    var count = 0;
    $('#ddl1').click(function () {
        if (count < 1) {
            $('#ddl1').val(defaultValue);
            count++;
        }        
    });
});

Answer 3

不确定您为什么要这样做，但是 focusin 或 focus 事件可以帮助您实现这一点，如下所示：

$(function() {
    $('#ddl1').on('focusin', function() {
        this.value != 0 || $(this).val( 4 );
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="ddl1">
    <option value="0">number</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

如何 select 下拉列表中的给定选项

How to select the given option in dropdown

javascript

jquery

select