0

PHPpost メソッドを使用してテーブルを作成しようとしていますが、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();

繰り返しになりますが、問題は、なぜこの変数が内部 HTML または選択された 'テキスト' に設定されていないのかということです<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

一部のブラウザは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 に答える
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 に答える