0

選択フィールド id="projects" を含むフォームがあります。これを変更すると、非表示の選択フィールド「タスク」が表示され、選択したプロジェクトのタスクが動的に表示され、dB を照会します。ユーザーは、選択した proj_id、task_id の組み合わせで更新される時間を入力できます。次のコードは、「プロジェクト」が変更されたときに選択される「タスク」を示しています。

$('.tasks').hide();
$('#projects').change(function(){
    $('.tasks').show();
    $('.tasks').append("<option>1</option><option>New Task</option>");
});

次に、フォームを複製するボタンをクリックする機能を追加しました。各行には、1.select 'project' 2. プロジェクト選択に表示される非表示の選択 'task' 3. New Task オプションが選択されたときにアクティブ化される非表示のテキスト ボックス 4. 時間入力ボックス一週間ずっと。

$('#add').click(function () {
    $('#row').clone().appendTo('#dynform');
});

必要な機能は、各ユーザーが行を追加し、さまざまなプロジェクトとタスクの組み合わせを選択して、それらに対して時間を記録できることです。

ここでの問題は、最初の行プロジェクトを変更すると、追加されたすべての行も影響を受けるため、それらを分離できないことです。私は、Web ページ内のものを動的に変更することに慣れていません。私を助けてください。

全体の作業フィドル - http://jsfiddle.net/PuWMK/1/

4

1 に答える 1

1

あなたはこれを試すことができます

$('.tasks').hide();
$('#dynform').on('change' , '#projects', function(){
    $(this).next('.tasks').show()
    .append("<option>1</option><option>New Task</option>")
});

$('#add').click(function () {
    $('#row').clone().appendTo('#dynform');
});

$('.tasks').change(function(){
    $('#new').css('visibility','visible');
});

デモ。

于 2013-06-29T21:36:37.037 に答える