Question

HTML excerpt

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"/>

Javascript that is relevant to upper HTML

$("#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;
});

This code works ok… But I want to change it. My problem is that selection group has two categories… one is marks & other is absent..

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

Here when I select an option its value gets copied to the input box.

How can I change this code to copy selected option’s value when user selects one of the Absent category options but don’t do anything when they select a Marks option?

Demo Link:- Demo Link

Answer 1

I’ve changed your HTML a bit to actually separate two option groups, and then also changed script to only copy value to textbox (and disable it) when an option from one of the groups is selected.

Here’s the changed JSFiddle that does the trick.

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"/>   

And script

$("#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;
});