如何在選擇下拉菜單上觸發點擊事件

Question

我有以下代碼用於使用文本和值來選擇顯示下拉列表的下拉列表.i谷歌盡可能多的代碼，但它們都不起作用。我想在警報對話框中顯示所選下拉菜單項的內容。我已經嘗試過jquery和javascript代碼，但它們不起作用，請幫助我解決此問題

  <div class="col-sm-1"></div>
            <div class="col-sm-3">
                <div class="fleft " id="drop-down">

                    <select id="cd-dropdown" class="cd-select"  >

                        <option value="1" >Home</option>
                        <option value="2" >Movies</option>

                        <option value="3" >T.V. Shows</option>
                        <option value="4" >Photos</option>
                        <option value="5" >Site Help</option>

                    </select>
                </div>
            </div>

Answer 1

使用JQuery，您可以執行以下操作：

$('#cd-dropdown').bind('change', function () {
   alert($(this).find('option:selected').text());
});

如果要使用值而不是文本，請使用.val()

Answer 2

在改變

$(document).ready(function(){
    $("#cd-dropdown").change(function(){
       alert($(this).find('option:selected').val()); // val or text
    });
});

或加載時

$(document).ready(function () {
     alert($("#cd-dropdown").find('option:selected').val()); // val or text
});

Answer 3

更新的鏈接

HTML代碼：

 <div class="col-sm-1"></div>
                <div class="col-sm-3">
                    <div class="fleft " id="drop-down">

                        <select id="cd-dropdown" class="cd-select"  onmousedown="this.value='';" onchange="jsFunction(this.value);" >

                            <option value="1" >Home</option>
                            <option value="2" >Movies</option>

                            <option value="3" >T.V. Shows</option>
                            <option value="4" >Photos</option>
                            <option value="5" >Site Help</option>

                        </select>
                    </div>
                </div>

JS代碼：

function jsFunction(value)
{
    alert(value);
}

Answer 4

您可以使用jQuery這樣操作

$(document).on('change',"#cd-dropdown", function(){
 alert($(this).val());  // will display selected option's value
 alert($(this).find('option:selected').text()); //will display selected option's text
});