Question

我有一个小问题。我有以下表格：

<form action="task.php" method="post">
   ID: <input id="iddev" type="text" name="id" disabled> <br/>
   Latitude: <input type="text" name="lat"> <br/>
   Longitude: <input type="text" name="lon"> <br/>
   <button type="submit" class="btn btn-danger">Done!</button>
</form>

我想用已存储在我的下拉列表中的现有值填充已禁用的“ID输入”：

<?
foreach ($arajka as $a){
      echo  "<option data-id='" .$a['id'] ."' data-lat='" .$a['lat'] . "' data-lon='" .$a['lon'] . "'value=\"" .$a['id']. "\">" .$a['id']. "_" . $a['name'] . "</option>";
}
?>

我的意思是当用户从我的下拉菜单中选择其他选项时，我希望此输入更改。我已经用JQuery改变了一些东西：

$( document ).ready(function() { 
$('#loc').change(function(){
    var lat = $(this).find(':selected').attr('data-lat');
    var lon = $(this).find(':selected').attr('data-lon');
            var id = $(this).find(':selected').attr('data-id');
    $('#mapka').html("<iframe width=\"425\" height=\"350\" frameborder=\"0\" scrolling=\"no\" marginheight=\"0\" marginwidth=\"0\" src=\"https://maps.google.com/maps?q=loc:"+lat+","+lon+"&amp;num=1&amp;t=m&amp;z=14&amp;output=embed\"></iframe><br />");
            $('#iddev').html(id);
    });
});

有没有选择呢？我错过了一些非常简单的事吗？或者我是否需要重新加载整个表单？亲切的问候！

Answer 1

尝试使用option:selected而非:selected

var lat = $(this).find('option:selected').attr('data-lat');
var lon = $(this).find('option:selected').attr('data-lon');
var id = $(this).find('option:selected').attr('data-id');

如果通过ajax加载表单，请使用以下代码：

$(document).ready(function() {
    $(document).on('change', '.quickviewLink a', function(e){

    });
});

Answer 2

您不会使用.html()更新输入字段。尝试在下拉代码中将.html()更改为.val()。

$('#iddev').html(id);

到

$('#iddev').val(id);

在旁注中，您可以通过执行以下操作从所选元素中获取数据，而不是找到所选项目3次并查找特定数据属性。

// get all details bound to the selected option.
var mapDetails = $(this).find(':selected').data();

// lat
mapDetails.lat;

// long
mapDetails.lon;

// id
mapDetails.id;

使用现有值</form>填充<form>的输入

2 个答案: