I have php code bellow, I want to write a script to read option value from drop-down list and put each value in the input box when I change the selection. Please, help.
我有php代码,我想编写一个脚本来从下拉列表中读取选项值,并在我更改选择时将每个值放在输入框中。请帮忙。
<html>
<head>
<!-- Load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
//I want to write a script that will read the selected value and put in the input box
</script>
</head>
<body>
<?php
for ($i=0;$i<7;$i++)
{
?>
<select id='select$i'>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" id="inputoption$i" />
<?php }?>
<br />
</body>
</html>
6 个解决方案
#1
Try this:
<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="category-panel">
<?php
for($i = 0; $i < 7; $i++)
{
?>
<select id='select<?php echo $i; ?>'>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" id="inputoption<?php echo $i; ?>"/>
<?php } ?>
<br/>
</div>
<script>
$("select").on("change", function()
{
$(this).next("input").val($(this).val());
});
</script>
</body>
</html>
#2
Better change the id into class :
更好地将id更改为类:
$(function() {
$(document).on('change', '.selectMe', function() {
$(this).next().val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='selectMe'>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" class="inputoption" />
<select class='selectMe'>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" class="inputoption" />
#3
$("select[id^=select]").change(function(event){
$(event.target).next().val($(event.target).val());
});
Code running here:
代码在这里运行:
#4
Generate them as -
将它们生成为 -
<?php
for ($i=0;$i<7;$i++)
{
?>
<select class="selectoption">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" class="inputoption" />
<?php }?>
With js -
用js -
$('.selectoption').on('change', function() {
$(this).next('.inputoption').val($(this).val());
});
#5
You can try below script:
你可以尝试下面的脚本:
$('.selc').on('change',function()
{
$(this).siblings('input[type=text]').val($(this).val());
});
#6
I used Cryptovirus solution, I do as bellow and it works very well.
我使用了Cryptovirus解决方案,我做的如下,它的效果非常好。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<?php
for ($i=0;$i<7;$i++)
{
echo("<script>
$('select[id^=select]').change(function(event){
$(event.target).next().val($(event.target).val());
});
</script>");
echo("<select id='select$i'>
<option value='1'>Option1</option>
<option value='2'>Option2</option>
<option value='3'>Option3</option>
</select>
<input type='text' name='name' id='inputoption$i' /> </br>");
}?>
</body>
</html>
#1
Try this:
<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
</head>
<body>
<div class="category-panel">
<?php
for($i = 0; $i < 7; $i++)
{
?>
<select id='select<?php echo $i; ?>'>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" id="inputoption<?php echo $i; ?>"/>
<?php } ?>
<br/>
</div>
<script>
$("select").on("change", function()
{
$(this).next("input").val($(this).val());
});
</script>
</body>
</html>
#2
Better change the id into class :
更好地将id更改为类:
$(function() {
$(document).on('change', '.selectMe', function() {
$(this).next().val($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='selectMe'>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" class="inputoption" />
<select class='selectMe'>
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" class="inputoption" />
#3
$("select[id^=select]").change(function(event){
$(event.target).next().val($(event.target).val());
});
Code running here:
代码在这里运行:
#4
Generate them as -
将它们生成为 -
<?php
for ($i=0;$i<7;$i++)
{
?>
<select class="selectoption">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
</select>
<input type="text" name="name" class="inputoption" />
<?php }?>
With js -
用js -
$('.selectoption').on('change', function() {
$(this).next('.inputoption').val($(this).val());
});
#5
You can try below script:
你可以尝试下面的脚本:
$('.selc').on('change',function()
{
$(this).siblings('input[type=text]').val($(this).val());
});
#6
I used Cryptovirus solution, I do as bellow and it works very well.
我使用了Cryptovirus解决方案,我做的如下,它的效果非常好。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<?php
for ($i=0;$i<7;$i++)
{
echo("<script>
$('select[id^=select]').change(function(event){
$(event.target).next().val($(event.target).val());
});
</script>");
echo("<select id='select$i'>
<option value='1'>Option1</option>
<option value='2'>Option2</option>
<option value='3'>Option3</option>
</select>
<input type='text' name='name' id='inputoption$i' /> </br>");
}?>
</body>
</html>