How to add onClick in html option?

Question

What im trying to do is when the <option> is clicked the value will be displayed in the <input type='text'>

here is my code right now:

<select id='months'>
   <option value='9' id='months9'>9 Months</option>
   <option value='10' id='months10'>10 Months</option>
   <option value='11' id='months11'>11 Months</option>
   <option value='12'id='months'>12 Months</option>
</select>

if($months == '9'){
   echo 'today +9 months';
}
if($months == '10'){
   echo 'today + months';
}
if($months == '11'){
   echo 'today +11 months';
}
if($months == '12'){
   echo 'today +12 months';
}

<input type='text' name='signoff_date'>

NOTE: I know this code will not work i'm just giving you idea how my program works.

I hope you understand it. Thanks

so far i only tried php codes that only changes the value of the input text after you submit the form — adrian pascua, Nov 09 '16 at 14:41
Please check this link:-http://stackoverflow.com/questions/3487263/how-to-use-onclick-or-onselect-on-option-tag-in-a-jsp-page — Razia sultana, Nov 09 '16 at 15:02

score 1 · Accepted Answer · answered Nov 09 '16 at 14:47

To get the current value of the select, use the onchange event:

function updateValue(value)
{
    document.getElementById('signoff_date').value = value
}

// set a defalt value
updateValue(document.getElementById('months').value)

<select id='months' onchange="updateValue(this.value)">
   <option value='9' id='months9'>9 Months</option>
   <option value='10' id='months10'>10 Months</option>
   <option value='11' id='months11'>11 Months</option>
   <option value='12'id='months'>12 Months</option>
</select>

  
<input type='text' name='signoff_date' id="signoff_date">

score 0 · Answer 2 · answered Nov 09 '16 at 14:40

0

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    $('input[name="signoff_date"]').val(valueSelected);
});

answered Nov 09 '16 at 14:40

Rafał Cz.

735
9
19

score 0 · Answer 3 · answered Nov 09 '16 at 14:45

Untested but something like this perhaps - assign an onchange event handler rather than a click handler.

<script type='text/javascript'>
    function evtoption(e){
        var el=e.target ? e.target : e.srcElement;
        var selected=el.options[ el.options.selectedIndex ];
        var value=selected.value;
        var txt=selected.text;
        var id=selected.id;

        document.querySelectorAll('input[name="signoff_date"]')[0].value=id+value+txt;
    }

    document.getElementById('months').addEventListener( 'change', evtoption, false );
</script>

How to add onClick in html option?

3 Answers3