首頁 >後端開發 >php教程 >javascript - jq 如何顯示出來下拉框value的值

javascript - jq 如何顯示出來下拉框value的值

WBOY
WBOY原創
2016-09-06 08:57:09877瀏覽

我想寫這樣的東西
有一個下拉框,當選取某個值的時候,在一個div內裡顯示出來目前選取的值。切換其他的下拉選項時,div裡的值也會改變。

這是我的程式碼,但是無法實作。請問哪裡錯了?

<code><body>
    <script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>

<select id="s">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>
    <script type="text/javascript">
        $('#k').on('change', function()
{
    document.write($("#s").val());
    
});
    </script>
    <div id="k"></div>
</body>value值
我想在div#k中显示当前选中的下拉选项</code>

請問哪裡錯了

回覆內容:

我想寫這樣的東西
有一個下拉框,當選取某個值的時候,在一個div內裡顯示出來目前選取的值。切換其他的下拉選項時,div裡的值也會改變。

這是我的程式碼,但是無法實作。請問哪裡錯了?

<code><body>
    <script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>

<select id="s">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
</select>
    <script type="text/javascript">
        $('#k').on('change', function()
{
    document.write($("#s").val());
    
});
    </script>
    <div id="k"></div>
</body>value值
我想在div#k中显示当前选中的下拉选项</code>

請問哪裡錯了

<code><!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
    <script>
    $(document).ready(function(){
        $('#s').on('change', function(){
            $("#k").text($("#s").val())
        })
    })
    </script>
</head>
<body>
    <select id="s">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </select>
    
    <div id="k"></div>
</body>
</html></code>

你的邏輯性已經出神入化了!
要去s變化的值你把事件綁定到k身上?

要用each 然後讓每個option綁定事件。這樣才會有效果。

<code><script type="text/javascript">

    $('#s').each(function (i, j){
        
        $(j).click(function(){
            value = $(j).val();
            $("#k").text(value);
        })
    })
    
</script></code>

試試這個:

<code>$('#s').change(function(){
  $('#k').text($(this).find(':selected').text());
});</code>

s改變時k的文字變成s目前選取項目的文字。
手機碼字,不詳見諒!

`$(function(){$('#s').on('change',function(){
$('#s :checked').val();
});})`

原生select不就能實現嗎

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn