1

簡単に言うと、次のドロップダウンリストを有効にして入力する this 関数を取得しました（別のjQuery関数を呼び出しますが、今のところ投稿しません）。それは完全に機能します。現在、デフォルト値を渡して、実際に何もクリックせずに次のドロップダウンを有効にして入力しようとしています。

現在機能している機能：

$(function() {
    $(document).on('change', '.update', function() {
    formObject.run($(this));
    });
});

ここでは、'change' イベントが使用されました。これは、ページが読み込まれると、最初のリスト以外のすべてのリストが無効になるためです。最初のリストで変更 (任意の項目を選択) すると 2 番目のリストが有効になり、後で 2 番目のリストを選択すると有効になります。 3番目のリストを有効にします。formObjet は、すべての「ダーティ ジョブ」を実行する関数「run」を含む変数です。

今、私は (何時間もブラウジングしてきました!) そのような選択を模倣するために change イベントまたはトリガー ハンドラーを呼び出すことができることを読みましたが、これまでのところどれも機能していません:

$('select[name="princ"]').change(); // DOES NOT WORK
$('select[name="princ"]').trigger('change'); // DOES NOT WORK EITHER

このコードを関数の前、後に切り取って配置しましたが、何も機能していないようです。ところで、「princ」は最初のドロップダウンで、ページが読み込まれたときに入力されます (入力する JavaScript には依存せず、単純に php と mysql です)。

助言がありますか？

4

2 に答える 2

0

質問を誤解している場合はお知らせください。ただし、同様のことを扱ったと思います。

ブラウザはすべて変更イベントを異なる方法で処理し、通常、ユーザーがフィールドを更新した後 (ページの別の場所をクリックして変更を確定する) をクリックしてそのフィールドから離れるまで発生しません。

私の回避策は、私のために仕事をする関数を作成し、その関数を変更する代わりにクリックで実行することでした。あなたのベースをカバーするために（そして不必要に動的なデータをロードしないようにするために）、私は次のようにします：

  1. グローバル変数またはオブジェクトを作成して、各ドロップダウンの状態を追跡します (ID、値などを保存できます。これにより、基本的にドロップダウンかどうかを確認できます。デフォルト状態の場合は、すべての変数を作成し、それらの値を空白に設定します)。
  2. いずれかのフィールドがクリックされるたびに実行され、ドロップダウンに渡される関数を作成します (ID、名前、または実際の jQuery オブジェクトのいずれかを介して)

JavaScript 部分 

$(document).ready(function() {
    // Attach click function to princ
    $("select[name='princ']").click(function() {
        var value = $(this).val();  // Grab the value
        if (value != demo.globals.princ) {   // Check if the value is the old value
            demo.checkDropdown('princ', 'princ2', value);  // If it's a new value, grab the selected value and run the checkDropdown function
            demo.globals.princ = value;  // Set the global value
            $('#status').text("loading new values for princ " + value);
        } else {
            $('#status').text("princ values already loaded " + value);  // Unnecessary but used to output the status of the clicks
        }
    });
    // Attach click function to princ2
    $("select[name='princ2']").click(function() {
        var value = $(this).val();
        if (value != demo.globals.princ2) {
            demo.checkDropdown('princ2', 'princ3', value);
            demo.globals.princ2 = value;
            $('#status').text("loading new values for princ2 " + value);
        } else {
            $('#status').text("princ2 values already loaded " + value);
        }
    });
});
// Create a global object to avoid function collision
var demo = {};
// Create global variables
demo.globals = {
    princ: 0,
    princ2: 0
}
// Dropdown population function
demo.checkDropdown = function(dropDownName, nextDropDown, value) {
    // Check if it's already populated with the correct data, otherwise load it
    // You can also load dynamic data here via AJAX and update the select field
    var dropDownHtml = "<option value='1'>1</option>";
    dropDownHtml += "<option value='2'>2</option>";
    dropDownHtml += "<option value='3'>3</option>";
    $("select[name='" + nextDropDown + "']").html(dropDownHtml);
}

HTML 

<body>
    <form>
        <div id="status">Page loaded</div>
        <select name="princ">
            <option value="0">Please select one</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>

        <select name="princ2">
        </select>

        <select name="princ3">
        </select>

    </form>
</body>

これがお役に立てば幸いです。これはあなたが求めているものよりも少し多いですが、変更時にドロップダウン値を取得する方法の完全で実用的な例です。

于 2012-07-06T00:17:35.807 に答える
0

テストに使用しているブラウザによっては、変更イベントがドキュメント レベルまでバブリングしない場合があります: http://www.quirksmode.org/dom/events/change.html

あなたの例はIE8以下では機能しません。

于 2012-07-05T22:32:53.137 に答える