如何在下拉列表中选择给定选项答案

【问题标题】：How to select the given option in dropdown如何在下拉列表中选择给定选项
【发布时间】：2015-01-15 14:28:15
【问题描述】：

我有一个下拉菜单

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

但现在的问题是当用户尝试选择下拉菜单的默认选项时，即number，选择了选项4。任何想法如何解决这个问题？

问题是当用户只点击下拉菜单时 -> option4 必须被选中，当用户点击选项 number -> 选项 number 必须被选中而不是选项 4。

【问题讨论】：

您能告诉我们您想要的功能吗？喜欢你真正想要它做什么？
@indubitablee : 当用户只点击下拉菜单时 -> option4 必须被选中并且当用户点击选项 number -> 选项 number 必须被选中而不是选项 @987654334 @...更新了问题

标签： javascript jquery select

【解决方案1】：

不确定您为什么要这样做，但 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>

【讨论】：

谢谢，这就是我要找的东西。但是你能解释一下这条线的作用吗this.value != 0 || $(this).val( 4 );
这只是写if( this.value == 0 ) { $(this).val( 4 ); } 的一种花哨方式......它利用了这样一个事实：在OR 表达式中，只有一个操作数需要为真表达式为真，因此$(this).val( 4 ) 被评估仅当 this.value != 0 为false。
okies :) ，感谢一位朋友的回答和解释..希望我能给你加倍的支持 :p :D
不客气！非常感谢您的反馈；很高兴我能帮上忙。

【解决方案2】：

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

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

DEMO

编辑：您应该使用一个类来给人一种默认选项的感觉，您实际上并不希望在用户每次点击时将其设置为选中：

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

【讨论】：

所以您希望在单击下拉菜单时突出显示该选项？ @SidM
当用户只点击下拉菜单时 -> option4 必须被选中并且当用户点击选项number -> 选项number 必须被选中而不是选项4..更新了问题
@SidM -- 查看我的编辑，在默认选项上使用一个类。
将其突出显示为蓝色不会选择该选项。 OP 希望在您第一次单击选择 @SidM 查看我的解决方案时自动选择它
@indubitablee：她？ o_o

【解决方案3】：

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

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

【讨论】：

应用计数检查不是正确的做法。