Unable to get the value of the selected <select> element

Here is a drop-down list and you need to determine which element is selected but an error occurs. Please help to understand.

app.js:350 Uncaught TypeError: Cannot read property 'options' of undefined
    at onChangeSelectCategory (app.js:350)
    at HTMLSelectElement.onchange

with HTML:

<body>
<p align="center"><label>Category</label></p>
<p align="center">
<select onchange="onChangeSelectCategory()" style="visibility: visible" id="adCategory" class="category" name="category" style="width: 300pt">
    <option value="1">Category 1</option>
    <option value="2">Category 2</option>
    <option value="3">Category 3</option>
    <option value="4">Category 4</option>
</select></p>

<p align="center"><label>Sub Category</label></p>
<p align="center">
<select style="visibility: visible" id="subCategory" class="category" name="subcategory" style="width: 300pt">

</select></p>
<script src="scripts/app.js"></script>
</body>

and JS:

var adCategoryRef = document.getElementById('adCategory');
var subCategoryRef = document.getElementById('subCategory');
function  onChangeSelectCategory() {
    var adSelectedCategoryVal = adCategoryRef.options[adCategoryRef.selectedIndex].text; //error
    switch (adSelectedCategoryVal) {
        case 'Category 1': {

26 thoughts on “Unable to get the value of the selected <select> element”

  1. As Tom mentioned in his comment, adCategoryRef might be not rendered. I just recommend you to try passing the select element in function parameters, like:

    function onChangeSelectCategory(adCategoryRefSel) {
        var adSelectedCategoryVal = adCategoryRefSel.options[adCategoryRefSel.selectedIndex].text; //error
    }
    

    And html:

    <select onChange="onChangeSelectCategory(this);" style="visibility: visible" id="adCategory" class="category" name="category" style="width: 300pt">
    
    Reply
  2. Here I changed but there is already another error with another .

    Uncaught TypeError: Cannot read property 'options' of undefined
        at onChangeSelectCategory (app.js:352)
        at HTMLSelectElement.onchange 
    

    JS

    var subCategoryRef = document.getElementById('subCategory');
    function  onChangeSelectCategory(adCategoryRefSel) {
        var adSelectedCategoryVal = adCategoryRefSel.options[adCategoryRefSel.selectedIndex].text;
        switch (adSelectedCategoryVal) {
            case 'Category 1': {
                var length = subCategoryRef.options.length; \\ error
                for (i = length-1; i >= 0; i--) {
                    subCategoryRef.options[i] = null;
                }
    

    HTML

    <body>
    <p align="center"><label>Category</label></p>
    <p align="center"><select onChange="onChangeSelectCategory(this);" style="visibility: visible" id="adCategory" class="category" name="category" style="width: 300pt">
        <option value="1">Category 1</option>
        <option value="2">Category 2</option>
        <option value="3">Category 3</option>
        <option value="4">Category 4</option>
    </select></p>
    
    <p align="center"><label>Sub Category</label></p>
    <p align="center"><select style="visibility: visible" id="subCategory" class="category" name="subcategory" style="width: 300pt">
    
    </select></p>
    <script src="scripts/app.js"></script>
    </body>
    
    Reply

Leave a Comment