Question

我有这个jQuery代码：

<script type="text/javascript" >
$(function(){

  var form1 = $('#form1'), 
      form2 = $('#form2');  

  $(document).ready(function() {
    $(':select[name]', form2).val(function(){
      return $(':input[name='+ this.name +']', form1).val();
    });
  });

});
</script>

我有这两个HTML表单

<form id="form1">
    <select id="a" name="a" size="5" style="width: 400px;">
        <option value="01">001</option>
        <option value="02">002</option>
        <option value="03">003</option>
        <option value="04">004</option>
     </select>
 </form>
 <form id="form2">
       <input name="a" type=text>
 </form>

我希望当用户从列表中选择一个选项时，它会立即更新form2中的输入框。它适用于两个输入框之间，但没有选择 - http://jsbin.com/jalomeyu/4/edit?html,js,output

Answer 1

您只需在select元素上收听change事件即可。此外，您的原始代码存在一些问题：

:select不是有效的伪类。只需使用select[name]。
您正在将$(document).ready(function() {...}嵌套在另一个中。 $(function() {...}是简写;）

以下是更正的JS：

$(function(){

  var form1 = $('#form1'), 
      form2 = $('#form2');  

  $('select[name]', form1).change(function(){
    $(':input', form2).val(this.value);
  });

});

在此处查看更新的JSbin：http://jsbin.com/tajijajife/1/

Answer 2

请尝试以下代码，

HTML，

<form id="form1">
    <select id="a" name="a" style="width: 185px;">
        <option value="Ali">Ali</option>
        <option value="Ahmad">Ahmad</option>
        <option value="Osama">Osama</option>
        <option value="Zain">Zain</option>
        <option value="Ahad">Ahad</option>
        <option value="Bakar">Bakar</option>
        <option value="Arish">Arish</option>
        <option value="Anjum">Anjum</option>
     </select>

 </form>
 <form id="form2">
       <input name="a" type=text>
 </form>

JQuery的

<script type="text/javascript" >
$(function(){

  var form1 = $('#form1'), 
      form2 = $('#form2');  

  $('#form1').change(function(){
    $(':input[name]', form2).val(function(){
      return $(':input[name='+ this.name +']', form1).val();
    });
  });

});
</script>

Answer 3

第一个选择元素更改时，您需要执行更新。例如：

$(function() {
    var form1 = $('#form1'), 
        form2 = $('#form2');

     $(form1).change(function() {
         $(':select[name]', form2).val(function() {
             return $(':input[name='+ this.name +']', form1).val();
         });
     });
});

Answer 4

每按一次键，您都可以使用keyup功能运行。

示例：

＆＃13;

$(document).ready(function() {
  var form1 = $('#form1'),
    form2 = $('#form2');

  $('input').keyup(function() {
    $(':input[name]', form2).val(function() {
      return $(':input[name=' + this.name + ']', form1).val();
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Testing</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
</head>

<body>
  <form id="form1">
    <input name="a" type=text value="test">
    <input name="b" type=text>
    <input name="c" type=text>
    <input name="d" type=text>
  </form>
  <form id="form2">
    <input name="a" type=text>
    <input name="b" type=text>
    <input name="c" type=text>
    <input name="d" type=text>
  </form>

</body>

</html>

＆＃13;

将选择选项值从一种形式复制到另一种形式

4 个答案: