jquery：選擇選項選擇的屬性沒有改變

Question

我的問題是我有一個下拉列表的SelectedValue沒有被傳遞到ASP.NET回發。從頁面中提取jquery更改處理程序並隔離選項的選擇後，我可以看到即使tho「：selected」也給了我新選擇的選項，它不會粘住，因此空白選項值將傳回給服務器。

這個jsfiddle重現了這個問題。從列表中選擇一個選項，然後單擊go並查看警告框中顯示的HTML以查看我正在進行的操作。

http://jsfiddle.net/GAcEw/

這裏是一個獨立的網頁版本：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $('#ddl').on('change', function (e) { 
     $('.sv').text($(this).find(":selected").attr('value')); 
     }); 
$('#go').click(function() { alert($('#ddl').html()) }); 
     }); 
</script> 
<select name="ddl" id="ddl"> 
<option selected="selected" value="">-- Choose --</option> 
<option value="1">Degree</option> 
<option value="2">HND</option> 
<option value="16">HNC</option> 
</select> 
<div><span>SelectedValue: </span><span class="sv"></span></div> 
<div><input id="go" type="button" value="go"/></div> 

我在做什麼錯？

乾杯， .pd。

編輯：

代碼後面的usercontrol。該設置是主 - >頁面 - > TabControl-> UserControl->的DropDownList

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 


    JSHelper.Add("/scripts/jquery-stuff.js", Me.Page) 

    If Not IsPostBack Then 
     bindDDL(ddl, True, "") 

    End If 
End Sub 

Public Shared Sub bindDDL(ByRef _ddl As DropDownList, Optional ByVal _incBlank As Boolean = False, Optional ByVal _valBlank As String = "") 
    _ddl.Items.Clear() 
    If _incBlank Then 
     _ddl.Items.Add(New ListItem("-- Choose --", _valBlank)) 
    End If 
    _ddl.AppendDataBoundItems = True 
    _ddl.DataSource = QualificationTypeGetActive() 
    _ddl.DataTextField = "Description" 
    _ddl.DataValueField = "QualificationTypeID" 
    _ddl.DataBind() 

End Sub 

Answer 1

從jQuery的生成.html將返回初始化，因爲它使用瀏覽器的innerHTML財產的任何數據，但您的數據有，如果沒有問題你試圖提交它。所以不用擔心它在改變DOM改變，這裏就是一個證明：

<form class='test'> 
<select name="ddl" id="ddl"> 
    <option selected="selected" value="">-- Choose --</option> 
    <option value="1">Degree</option> 
    <option value="2">HND</option> 
    <option value="16">HNC</option> 
</select> 

$(function() { 
    $('#ddl').on('change', function (e) { 
     $('.sv').text($(this).find(":selected").attr('value')); 
    }); 
    $('#go').click(function() { 
     alert($('#ddl').html()) 
    }); 
    $('.test').submit(function(e){ 
     e.preventDefault(); 
     console.log($(this).serializeArray()); 
    }); 
}); 

結果：

0: Object 
    name: "ddl" 
    value: "2" // I selected your second option while testing 

Try it yourself