Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a month ago

How can I make the dropdown menu show a number instead of a list?

I am attempting to create a responsive dropdown menu that displays the listed job titles according to their respective fields. Despite implementing the code from the script.js file, the dropdown menu displays numbers instead of the job titles. The attached image provides further clarification. Below, you can find the HTML and JS code snippets: 




    
    UPLOAD FILE
    
    


    
        
        

            
Choose a job field: 

            
            


            
Choose a job title: 

            
        

        
            
Upload a CSV file

            

                
                


                
            

        
    

    





var jobInfo = {
    "Information Technology and Software Development": ["Senior Frontend Developer", "Data Processing Specialist", "Java Developer"],
    "Digital Marketing": ["Digital Marketing Web Specialist", "Video Editor", "Graphic Designer"],
    "Finance": ["Financial Analyst-SSC", "Accountant", "Specialist, Business Finance (APAC)"]
}
window.onload = function() {
  var jobField = document.getElementById("job-field");
  var jobTitle = document.getElementById("job-title");
  for (var x in jobInfo) {
    jobField.options[jobField.options.length] = new Option(x, x);
  }
  jobField.onchange = function() {
    //empty Chapters- and Topics- dropdowns
    jobTitle.length = 1;
    //display correct values
    for (var y in jobInfo[this.value]) {
      jobTitle.options[jobTitle.options.length] = new Option(jobInfo[this.value][y], jobInfo[this.value][y]);
    }
  }
}
Let me know if you have any doubts.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
Thank you for sharing the code snippets. Based on the code you provided, it seems that the issue is with the script.js file. The script.js file is responsible for populating the job titles in the dropdown menu based on the selected job field. The issue could be that the script.js file is not being loaded properly or there is an error in the code. You can try checking if the script.js file is being loaded properly by opening your browser's developer console and checking for any errors. If there are no errors, then you can try debugging the code in script.js file. Also, make sure that you have included the script.js file in your HTML file using the following code: 
<script src="{{ url_for('static', filename='script.js') }}"></script>
If you are still facing issues, please let me know.

Sources

How to fix number of visible items in HTML dropdown and allow multiple ...How to create drop down list but show different values in Excel?dropdown menu display number instead of the list[Solved] dropdown menu display number instead of the listDisplay the selected text as number on a drop down list
avatar
Tolerim
a month ago
The issue with the output showing numbers instead of job titles is because the code is currently assigning the index of the job title in the array as its value when creating new options. To display the actual job title, you should assign the job title string as both the text and value of the option element in the for loop. Here's an updated version of the code for creating new options with the corrected assignment: 
jobTitle.options[jobTitle.options.length] = new Option(jobInfo[this.value][y], jobInfo[this.value][y]);
}
;