Question

我正在尝试使用PHP帖子方法中的jQuery创建一个表格，但我的情况很糟糕。

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();

同样，问题是，为什么此变量未设置为所选<option>的内部HTML或“文本”。任何帮助表示赞赏

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

<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);
        })
    }

Answer 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事件没有触发。

Answer 2

问题出在您创建列表的位置。

作为一个值，您回显$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();

Answer 3

某些浏览器可能会在更新DOM之前触发onchange，因此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);
    });
}

使用jQuery将变量设置为正确的值

3 个答案: