0

我正在尝试使用PHPfrom a jQuerypost 方法创建一个表，但我失败了。

PHP/HTML

<tr>
  <td>Name: </td>        
  <td>                  
    <select id="name" onchange="showUserInfo()">  
      <option value="">Please select a person...</option>                       
      <?php $names = getUserName($db); foreach($names as $key => $value) { ?>                        
      <option value="<?php echo $key ?>"><?php echo $value ?></option>
      <?php }?>
    </select>
  </td>
</tr>
...
<div id="editUserTable">hi</div>

jQuery

function showUserInfo() {
    var str = $('#name option:selected').text(); // THIS VARIABLE IS NOT BEING SET
    $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
        $('#editUserTable').html(data);
    })
}

现在我知道这个变量没有被设置，因为如果我替换

var str = $('#name option:selected').text();

使用这样的实际用户名

var str = 'De Bug';

一切正常，表格加载到包含所有用户信息的表单中。

就像现在一样，当表单加载时，div 'editUserTable' 显示“hi”，但是当我选择用户时，“hi”消失并且没有显示任何内容。

应该注意我已经尝试过了，但它不起作用

var str = $('#name').val();

再次，问题是，为什么这个变量没有被设置为内部 HTML 或 selected 的“文本” <option>。任何帮助表示赞赏

编辑 如果我在选择用户后查看页面源，这就是我看到的

<select id="name" onchange="showUserInfo()">  
  <option value="">Please select a person...</option>                       
  <option value="0">De Bug</option>
  <option value="1">Jon Doe</option>
  <option value="2">A Name</option>                                               
</select>

编辑 2

如果我在我的 jQuery 中对用户名进行硬编码，那么所有内容都会加载到我的 html 页面中。

这是原版

function showUserInfo() {
        var str = $('#name option:selected').text(); // THIS VARIABLE IS NOT BEING SET
        $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
            $('#editUserTable').html(data);
        })
    }

如果我把它改成这个，它就可以了

function showUserInfo() {
        var str = 'De Bug'; // I can also use 'A Name' or 'Jon Doe' they all work
        $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
            $('#editUserTable').html(data);
        })
    }
4

3 回答 3

1

问题在于onchange没有从 HTML 选择中触发，但是如果您使用 jQuery 文档就绪功能，然后附加到change选择的事件，那么它将起作用，如下所示：

$(document).ready(function () {
    $('#name').change(function () {
        var str = $('#name option:selected').text(); // THIS VARIABLE IS NOT BEING SET
        $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
            $('#editUserTable').html(data);
        })
    });
});

这是一个jsFiddle

我不知道为什么常规的 JavaScript 事件没有触发。

于 2013-07-23T00:52:22.363 回答
1

问题出在您创建列表的地方。

作为一个值，你回显$key. 你应该回声$value代替。

<?php

$names = getUserName($db);
foreach($names as $key => $value) {
    ?><option value="<?php echo $value ?>"><?php echo $value ?></option><?php
}

?>

然后只需将您设置的行替换为str：

var str = $('#name').val();
于 2013-07-23T01:13:24.467 回答
1

某些浏览器可能会onchange在更新 DOM 之前触发，因此option目前不是:selected.

请根据元素的selectedIndex属性尝试此解决方案：select

function showUserInfo() {
    var i = $('#name')[0].selectedIndex;
    var str = $('#name option').eq(i).text();
    $.post('/TrakFlex/functions/getUserInfo.php', { input: str }, function(data) {
        $('#editUserTable').html(data);
    });
}
于 2013-07-23T01:26:47.470 回答