I am having a bit of problem here. I have have two fields one is a select field and the other is an input field which is readonly. What i am doing is that i am getting the value of the select and setting its value to the input field. Now here is the case where i want to save the "name" at the select field instead of the "232" but because i am setting its value to the input field whenever i change the "232" at the select to "name" the input fields value also changes to "name". How can i set the value of the select to name without changing the value of the input field which is "232"

                                        <label for="position-bottom-left"> Instruments <span class="mandatory">*</span></label>
                                        <select class="select2 form-select shadow-none" name="instrutype" id="instrutype" class="form-control demo" data-control="hue">
                                            <option selected="true" disabled="disabled">Select Intrument </option>
                                            
                                                    <option value="<?php echo "232"; ?>"> <?php echo "name"; ?></option>
                                        </select>

                                    </div>

                                    <div class="col-md-6 fieldspaceout">
                                        <label for="hue-demo">Tenure<span class="mandatory">*</span></label>
                                        <input type="text" name="tenure" id="tenure" class="form-control demo" data-control="hue" data-position="bottom left" value="<?php echo $tenure; ?>" readonly>
                                    </div>

<script type="text/javascript">
    var select = document.getElementById('instrutype');
    var input = document.getElementById('tenure');
    select.onchange = function() {
        input.value = select.value;
    }
</script>