如何使用jQuery顯示選擇表單的值？

我有以下代碼：如何使用jQuery顯示選擇表單的值？

<select id="testlist" class="select-block span8"> 
    <option value="0">Red</option> 
    <option value="1" selected="selected">Yellow</option> 
    <option value="2">Blue</option> 
    <option value="3">Green</option> 
</select> 
<div id="result"></div>

選擇時，我想在div「結果」自動更新以顯示所選選項的值。例如，如果我選擇藍色，我希望div顯示「2」。

我已經試過：

<script>$('#testlist').val()</script>

沒有運氣

使用jQuery（或JavaScript如果這是更明智的），我會怎麼做呢？

來源

2013-08-01 user2643370

' $（'＃testlist'）。val（）' – asawyer

['change' event]（https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change）：'$（「（）（）{alert（$（this）.val（））}）' – apsillers

你到目前爲止嘗試過什麼？顯示你已經嘗試過的東西的努力通常會讓你在這裏得到更好的答案。 – Jason

應該很好地工作：

//when the select changes 
$('#testlist').on('change', function() { 
    //set the text to the select's value 
    $('#result').text($(this).val()); 
}

取決於如果你的div有result，因爲它的ID。你可以看到一個工作的jsfiddle，在這裏：http://jsfiddle.net/MQBJ6/

來源

2013-08-01 19:08:53 Chad

我是一個jQuery的完整新手 - 我將如何實現？ <選擇ID = 「testlist」類= 「選擇塊span8」> <選項值= 「0」>紅色 <選項值= 「1」選擇= 「選擇」>黃色 <選項值= 「2」>藍 <選項值= 「3」>綠色 \t

' 此代碼似乎不會導致div進行編輯。 – user2643370

確保你在dom ready事件中運行你的代碼。通過工作鏈接編輯答案。 – Chad

@乍得的回答將與jQuery的工作 - 如果你不使用jQuery的你總是可以一起去：

<select id="testlist" class="select-block span8" onChange="setDiv();"> 
    <option value="0">Red</option> 
    <option value="1" selected="selected">Yellow</option> 
    <option value="2">Blue</option> 
    <option value="3">Green</option> 
</select> 
<div id="result"></div> 

<script> 
    function setDiv(){ 
     var testlist = document.getElementById('testlist').value; 
     document.getElementById('result').innerHTML = testlist; 
    } 
</script>

看到這裏的jsfiddle http://jsfiddle.net/jreljac/amara/

來源

2013-08-01 19:38:56 Jason

我以爲他自問題被標記爲'jquery' – Chad

如何使用jQuery顯示選擇表單的值？

回答

相關問題