不知道如何命名这个问题,但我可以在这里解释我的情况,我有以下代码(这不是一个真正的数据,我必须创建这个向你们展示我想要什么)
<!DOCTYPE html>
<html>
<head>
<title>Multiple form submit </title>
</head>
<body>
<form action="test.php" method="POST">
First Name : <input type="text" name="fname" /><br />
Last Name : <input type="text" name="lname" /><br />
Gender : <input type="text" name="gender" /><hr />
<select class="form-control input-sm" name="rta_address" id="rta_address">
<option value="2">5, Footer street, AA2 2KK</option>
<option value="23">44, Header street ZZ6 7FF</option>
<option value="28">56, Oak street, DD5 5LL</option>
<option value="33">5, (flat 5) Temple street, EE2 9HH</option>
</select>
<br />
Postcode : <input type="text" name="postcode" /><br />
House No : <input type="text" name="houseno" /><br />
Street : <input type="text" name="street" /><br />
<input type="submit" name="submit" value="Save" />
</form>
</body>
</html>
我想知道的是……如果用户除了下拉框中提供的地址之外没有其他地址,那么用户可以从下拉框中选择一个值,该值应该填充这些地址文本字段,否则用户可以手动输入
请记住,如果表单有大约40个项目,我这里只给你看了7或8个,所以提交表单我认为不是一个好主意,因为在这个时候表单还没有完全填好。
请注意,所有的地址都是通过循环从数据库来的。
我希望你明白我的意思
如果有必要解决这个问题,请随时提出任何问题。
对
你可以这样做:
$('#rta_address').change(function(){
var data = $(this).text().split(',');
$('input[name="houseno"]').val($.trim(data[0])) ;
$('input[name="street"]').val($.trim(data[1])) ;
$('input[name="postcode"]').val($.trim(data[2])) ;
});
是的,你可以做一个空的选择,比如:
在jquery $('#rta_address').append($('<option>-- SELECT --</option>');
$('#rta_address').text('-- SELECT --');
或在HTML中(将此添加到select中)
<option selected="selected">-- SELECT --</option>
您可以为每个选项使用数据属性如:
<option data-houseno="5" data-street="Footer Street" data-pincode="AA2 2KK">
5, Footer street, AA2 2KK
</option>
在jquery中使用这个
获取数据$(document).on('change','#rta_address',function(){
$('input[name="postcode"]').val($(this).find('option:selected').data('postcode')) ;
//AND SO ON
})
下面是一个例子- http://jsfiddle.net/3UA7X/2/
$('#rta_address').change(function(){
var addressParts = $(this).val().split(',');
$('input[name="postcode"]').val(addressParts[2]);
$('input[name="houseno"]').val(addressParts[0]);
$('input[name="street"]').val(addressParts[1]);
});
您可以使用jQuery库轻松实现。代码示例如下
$(document).on('change','#rta_address',function(e){
if($.trim($(this).val())!=''){
var tmp= $(this).val().split(" ");
var house_no=tmp[0];
var street=tmp[1]+" "+tmp[2];
var post_code=tmp[3]+" "+tmp[4];
$('input[name="postcode"]').val(post_code) ;
$('input[name="houseno"]').val(house_no) ;
$('input[name="street"]').val(street) ;
}
});