1

ユーザーが選択ボックスを使用してコースを追加できるフォームを作成しようとしています。

コースが追加されると、コースをユーザーに表示する新しいテーブル行が作成され、コースのプレフィックスと番号 (MATH120 など) が非表示のフォーム フィールド値に追加されます。最後に、削除ボタンを追加します。

削除ボタンは、テーブルの行と、削除されるコースに対応する非表示の入力値を削除する必要があります。

これが私のjsfiddleです：http://jsfiddle.net/MtJF2/10/

私のスクリプトは問題なく行を削除していますが、入力値を正しく削除していません。エラーは発生しません。ときどき、正しい値のゼロが削除されることに気付きました (たとえば、MATH120 は MATH12 になります)。これを引き起こしている可能性のあるアイデアはありますか？

HTML:

<script type="text/javascript">
    function deleteCourse($course){
    $('#' + $course).remove();
    $course = $course + ','
    alert($course);
    $('#required-courses').val(function($course, value) {
   return value.replace($course, '');
});
}
</script>
<table width="80%" align="center">
    <tr id="add-required-course">
        <td><input type="button" value="+ Add a Required Course" class="MC-big-button" onclick="$('#course-menu').slideToggle()" /></td>
    </tr>
</table> 
<input type="hidden" id="required-courses" name="required-courses" value="null" />
<table id="course-menu" width="80%" align="center">
    <tr>
        <td>Select the course prefix:</td>
        <td><select id="1" name="course-prefix">
                <option value="MATH">MATH</option>
                <option value="BIOL">BIOL</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>Select the course number:</td>
        <td><select id="2" name="course-num">
            <option value="101">101</option>
            <option value="120">120</option>
            </select>
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <input type="button" value="Add this course" class="MC-big-button" id="save-course" />
        </td>
    </tr>
</table>

Javascript:

document.getElementById("save-course").onclick = buildCourse;

function buildCourse() {
    var $coursePrefix = ($('#1').val());
    var $courseNum = ($('#2').val());
    var $course = $coursePrefix + $courseNum;
    var $HTMLoutput = '<tr id="' + $course + '"><td>' + $course + '<input type="button" value="Delete" onclick="deleteCourse(\'' + $course + '\')" /></td></tr>';
    var $VALUEoutput = ($('#required-courses').val());
    if ($VALUEoutput == 'null') {
        $VALUEoutput = $course + ',';
    }
    else {
         $VALUEoutput = $VALUEoutput + $course + ',';
    }
    $('#course-menu').slideToggle();
    $('#add-required-course').before($HTMLoutput);
    $('#required-courses').val($VALUEoutput);    
}

この質問は役に立ちましたが、私の実装はオフになっていると思います。

4

1 に答える 1

1

$courseの削除機能で新しい値に置き換えています

$('#required-courses').val(function($course, value) { 
// here it gets a new value which is wrong

このように使用してください

function deleteCourse($course){

    $('#' + $course).remove();
    $course = $course + ','
    alert($course);

    $('#required-courses').val(function(_, value) {
            return value.replace($course, '');
    });
}
于 2013-05-31T14:56:09.563 に答える