How to manipulate selected option's value to be the same as option text with JavaScript

Question

I have this dynamic HTML / JavaScript form that is working great, but I found that when I click submit it is bringing over the value of the option as its index and not as the text within the option.

I have tried altering the JavaScript code but can not seem to figure out how to resolve this.

HTML

    <!-- Category -->
    <label for="type">Category<span class="required-input"> *</span></label>
    <select id="type" name="type" onchange="ChangeTypeList()">
        <option value="">--Select--</option>
        <option value="Order Inquiry">Order Inquiry</option>
        <option value="Product Inquiry">Product Inquiry</option>
    </select>

    <!-- Sub Category -->
    <label for="reason">Sub Category</label>
    <select id="reason" name="reason"></select>

JavaScript

    var reasons = {};
    reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X'];
    reasons['Product Inquiry'] = ['Product Weight', 'Product Quality'];

    function ChangeTypeList() {
        var typeList = document.getElementById("type");
        var reasonsList = document.getElementById("reason");
        var reasonsType = typeList.options[typeList.selectedIndex].value;

        while (reasonsList.options.length) {
            reasonsList.remove(0);
        }
        var decisions = reasons[reasonsType];
        if (decisions) {
            var i;
            for (i = 0; i < decisions.length; i++) {
                var decision = new Option(decisions[i], i);
                reasonsList.options.add(decision);
                // console.log('decision', decision);
            }
        }
    }

When I select the first Category option 'Order Inquiry' and console.log:

console.log('decision', decision);

I see the following in the Console for the Sub Categories:

<option value="0">Order Status</option>
<option value="1">Order Issue</option>
<option value="2">X</option>

Ideally I want to see this is the Console for the Sub Categories:

<option value="Order Status">Order Status</option>
<option value="Order Issue">Order Issue</option>
<option value="X">X</option> 

Answer 1

option HTML element has a value and text attribute.

 var options = document.getElementById("dropdown").children; for (var i = 0; i < options.length; i++) { options[i].value = options[i].text; } 

 <select id="dropdown"> <option value="0">A</option> <option value="1">B</option> <option value="2">C</option> </select> 

Answer 2

You need to pass decisions[i] as second parameter in Option .
Syntax : new Option(text, value, defaultSelected, selected); More details

 var reasons = {}; reasons['Order Inquiry'] = ['Order Status','Order Issue', 'X']; reasons['Product Inquiry'] = ['Product Weight', 'Product Quality']; function ChangeTypeList() { var typeList = document.getElementById("type"); var reasonsList = document.getElementById("reason"); var reasonsType = typeList.options[typeList.selectedIndex].value; while (reasonsList.options.length) { reasonsList.remove(0); } var reason = document.getElementById('reason'); var decisions = reasons[reasonsType]; if (decisions) { var i; for (i = 0; i < decisions.length; i++) { //This line is changed var decision = new Option(decisions[i], decisions[i]); reasonsList.options.add(decision); console.log('decision', decision); } } } 

 <label for="type">Category<span class="required-input"> *</span></label> <select id="type" name="type" onchange="ChangeTypeList()"> <option value="">--Select--</option> <option value="Order Inquiry">Order Inquiry</option> <option value="Product Inquiry">Product Inquiry</option> </select> <!-- Sub Category --> <label for="reason">Sub Category</label> <select id="reason" name="reason"></select>