jQuery 根据其他输入将值附加到 html 输入答案

【问题标题】：jQuery append value to html input depending on other inputjQuery 根据其他输入将值附加到 html 输入
【发布时间】：2010-03-23 02:15:29
【问题描述】：

好的，标题有点混乱，但这是我的困境。我制作了一个网络应用程序来在内部跟踪 UPS 包裹。目前，您输入运单号，然后选择发货城市。一个帐户中的所有跟踪号都以相同的 X 数量的数字开头。因此，如果有人在一个输入中输入“1Z8473...”，“Houston, TX”将自动输入到下一个输入中。这是一件很难实现的事情吗？我从哪里开始？

【问题讨论】：

标签： jquery html forms

【解决方案1】：

您可以监视一个输入的变化，然后根据它的内容匹配指定的值，更新第二个。

简单的例子：

<label for="code">Code:</label> <input type="text" id="code" />

<label for="area">Area:</label> <input type="text" id="area" />

<script type='text/javascript'>
    $(document).ready(function(){
        // Listen for change on our code input
        $('#code').keyup(function(){
            var entered = $(this).val();  // text entered in 'code'

            // Look up the start of the code (first 6 digits?)
            if(entered.substring(0,6) == '1Z8473')
            {
                // Set the value of our "area" input
                $('#area').val('Houston, TX');
            }
        });
    });
</script>

上面的例子使用了一个简单的if 块来进行匹配。正如其他人在此处发布的那样，您可以将此值发送到服务器端脚本，该脚本为您所需的区域进行地理定位。因此，将上面的 if 替换为：

// Look up the area depending on the code entered
$.getJSON(
    '/geocoder_on_your_site.php?area='+entered, 
    function(data) {
        $('#area').val(data.location);
});

在你的服务器上，geocoder_on_your_site.php:

$input = $_REQUEST['entered'];
// Assume input is sanitised & checked first..
...
// Look up the area base on location
$data['location'] = look_up_location($input);

echo json_encode($data);

【讨论】：

正是我需要的！希望有一天我能学习 jQuery 所提供的一切，但到目前为止，我所能做的就是用 DOM 元素制作该死的动画！

【解决方案2】：

您需要一个地理定位 API，例如 this one

然后你需要使用 AJAX 调用来查询它，并将部分结果（本例中为城市）放入输入框中。

Here's an example 类似的东西，安装Firebug 并观察它发送的请求。

Source code is here

【讨论】：

【解决方案3】：

检查 keyup 事件并通过 ajax 将输入发送到服务器端工具，该工具查找数字并将城市发回。只需将其添加到输入的value 即可添加。

【讨论】：