1

HTMLの抜粋 

Selection:
<select name="no_exam" id="no_exam">
    <option value="" selected="selected">===select option===</option>
    <option value="A+">100-75</option>
    <option value="B+">50-74</option>
    <option value="C+">0-49</option>
    <option value="AB">AB</option>
    <option value="NE">NE</option>
    <option value="MC">MC</option>
</select>
</br>

Selected value:
<input type="text" name="std_marks" id="std_marks"/>

上位HTML関連のJavascript

$("#no_exam").change(function() {
    var textval = $(":selected",this).val();
    $('input[name=std_marks]').val(textval);

    // if value is selected, text field is readonly
    result_form.std_marks.disabled=(!textval) ? false : true;
});

このコードは正常に動作します...しかし、私はそれを変更したいです。私の問題は、選択グループに2つのカテゴリがあることです.1つはマークで、もう1つは欠落しています..

--------------------------------------------------
* Marks category: 100-75,50-74,0-49
-----------------------------------------------------
* Absent category: AB,NE,MC
------------------------------------------------------

ここでオプションを選択すると、その値が入力ボックスにコピーされます。

ユーザーが Absent カテゴリ オプションの 1 つを選択し、Marks オプションを選択したときに何もしないときに、選択したオプションの値をコピーするようにこのコードを変更するにはどうすればよいですか?

デモリンク:-デモリンク

4

1 に答える 1

0

HTML を少し変更して、実際に 2 つのオプション グループを分離し、スクリプトを変更して、グループの 1 つのオプションが選択されたときに値をテキスト ボックスにコピーする (そして無効にする) だけにしました。

これは、トリックを行う変更された JSFiddleです。

Selection :
<select name="myOption" id="myOption">
    <option value="" selected="selected">===select option===</option>
    <optgroup label="Marks" data-process="0">
        <option value="A+">100-75</option>
        <option value="B+">50-74</option>
        <option value="C+">0-49</option>
    </optgroup>
    <optgroup label="Absent" data-process="1">
        <option value="AB">AB</option>
        <option value="NE">NE</option>
        <option value="MC">MC</option>
    </optgroup>
</select></br>
Selected value :
<input type="text" name="student_mark"  id="student_mark"/>

そしてスクリプト

$("#myOption").change(function() {
    // get selected option
    var option = $(":selected", this);

    // get its value
    var value = option.val();

    // check if we need to copy value and disable input
    var process = option.parent().data("process") | 0;

    // get input box
    var input = $("#student_mark")[0];

    // set value and disable input
    input.value = value && process ? value : "";
    input.disabled = value && process && true || false;
});
于 2012-12-02T11:53:10.020 に答える