javascript - jq How to display the value of the drop-down box value-PHP Tutorial-php.cn

javascript - jq How to display the value of the drop-down box value

WBOY

Release： 2016-09-06 08:57:09

Original

861 people have browsed it

I want to write something like this
There is a drop-down box. When a value is selected, the currently selected value is displayed in a div. When switching other drop-down options, the value in the div will also change.

This is my code, but it doesn't work. What's wrong?

<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>

Copy after login

Excuse me, what’s wrong?

Reply content:

This is my code, but it doesn't work. What's wrong?

<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>

Copy after login

Excuse me what’s wrong

<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>

Copy after login

Your logic is amazing!
To change the value of s, do you bind the event to k?

Use each and bind events to each option. This will be effective.

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

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

Copy after login

Try this:

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

Copy after login

When s changes, the text of k becomes the text of the currently selected item in s.
Code on mobile phone, sorry for the unknown!

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

Can’t native selection be implemented?