如何在下拉列表中選擇給定選項

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

但現在問題是當用戶嘗試選擇下拉列表的默認選項即number ，選擇選項4 。 任何想法如何解決這一問題？

問題是當用戶只需點擊下拉菜單時 - >必須選擇選項4並且當用戶點擊選項number - >必須選擇選項number而不是選項4 。

Answer 1

您應該在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;
}

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>