Home > Article > Backend Development > javascript - jq How to display the value of the drop-down box value
javascript - jq How to display the value of the drop-down box value
- WBOYOriginal
- 2016-09-06 08:57:09860browse
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>
Excuse me, what’s wrong?
Reply content:
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>
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>
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>
Try this:
<code>$('#s').change(function(){
$('#k').text($(this).find(':selected').text());
});</code>
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?