jQuery将附加值添加到html输入取决于其他输入
问题描述:
好吧,标题有点混淆,但这是我的困境。我制作了一个网络应用程序,用于在工作中内部跟踪UPS包。目前,您输入了追踪号码,然后选择发货城市。所有来自账户的追踪号码都以相同的X数量开始。所以如果有人输入“1Z8473 ...”到一个输入中,“TX,Houston”会自动进入下一个输入。这是一个难以脱身的东西吗?我会在哪里开始?jQuery将附加值添加到html输入取决于其他输入
答
您可以监视一个输入的变化,然后根据它的内容匹配指定的值,更新第二个。
简单的例子:
<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);
答
你需要一个地理位置API,如this one
然后,你需要使用AJAX调用查询,并把结果的一部分(城市在这种情况下),在输入框中。
Here's an example类似的东西,安装Firebug并观察它发送的请求。
答
检查KEYUP事件,并通过AJAX发送输入到服务器端工具,看起来数量并发送退城。只需将它添加到输入的value
即可添加。
我需要的!希望这些日子里我会学习jQuery所提供的一切,但就目前而言,我所能做的就是使DOM元素脱离地狱! – werm 2010-03-22 18:53:52