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;
});

这段代码工作正常......但我想改变它。我的问题是选择组有两个类别......一个是标记，另一个是缺席..

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

在这里，当我选择一个选项时，它的值被复制到输入框中。

当用户选择“缺席”类别选项之一但在选择“标记”选项时不执行任何操作时，如何更改此代码以复制所选选项的值？

演示链接：-演示链接

4

1 回答 1

0

我已经稍微更改了您的 HTML 以实际分隔两个选项组，然后还将脚本更改为仅在选择其中一个组中的选项时将值复制到文本框（并禁用它）。

这是改变后的 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 回答