Assign a value to a Select option using JavaScript

Question

Assign a value to a Select option using JavaScript

Is there a way to populate the options in a <select> tag with values from an AJAX response array?

Here is my current code:

$.ajax({
    type: "GET",
    url: "http://.......api/1/AbsenceType",
    dataType: "json", 
    success: function (data) {
        // This part is not functioning correctly
        var ind = document.getElementById('mySelect').selectedIndex;
        document.getElementById('mySelect').options.value="2";//
    }
})

The select tag in question looks like this:

<select id=mySelect name="mySelect" required="required" data-mini ="true" onchange="myFunction3();"/>
    <option id ="type" value=""></option>
</select>

javascript ajax

Answer 1

Answer №1

I have received an AJAX response array and I need to display it in a select tag.

Instead of directly putting the array into the select tag, you can add the options from the array to the select and set the selected value using this method:

Begin with an empty select element :

<select id="mySelect" name="mySelect">

</select>

Then, use the following function as a callback :

var callback = function (data) {

    // Get the select element
    var select = document.getElementById('mySelect');

    // Add options from the array
    for (var i in data) {
        $(select).append('<option value=' + data[i] + '>' + data[i] + '</option>');
    }

    // Set the selected value
    $(select).val(data[1]);
}

Check out the demo here :

http://jsfiddle.net/M52R9/

Also, refer to these links for more information :

Adding options to a select using jQuery/JavaScript
Set selected option of a select box.

Answer 2

I have received an AJAX response array and I need to display it in a select tag.

Instead of directly putting the array into the select tag, you can add the options from the array to the select and set the selected value using this method:

Begin with an empty select element :

<select id="mySelect" name="mySelect">

</select>

Then, use the following function as a callback :

var callback = function (data) {

    // Get the select element
    var select = document.getElementById('mySelect');

    // Add options from the array
    for (var i in data) {
        $(select).append('<option value=' + data[i] + '>' + data[i] + '</option>');
    }

    // Set the selected value
    $(select).val(data[1]);
}

Check out the demo here :

http://jsfiddle.net/M52R9/

Also, refer to these links for more information :

Adding options to a select using jQuery/JavaScript
Set selected option of a select box.

Answer 3

Answer №2

give this a shot...

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>`
</select>

$("select").val("3");

check out the live demonstration at: http://jsfiddle.net/y4B68/

appreciate it

Answer 4

give this a shot...

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>`
</select>

$("select").val("3");

check out the live demonstration at: http://jsfiddle.net/y4B68/

appreciate it

Answer 5

Answer №3

Are you in search of something similar to this?

Check out the DEMO here

You have the option to add it like so -

$(function(){
$("#mySelect").html('<option value="2">2</option>');
});

I apologize for missing that you are actually doing this in an ajax callback. I have made updates in my demo as well.

You can also achieve this with -

document.getElementById("mySelect").innerHTML = '<option value="2">2</option>';

Instead of just adding a value, why not consider adding a new option altogether?

Answer 6

Are you in search of something similar to this?

Check out the DEMO here

You have the option to add it like so -

$(function(){
$("#mySelect").html('<option value="2">2</option>');
});

I apologize for missing that you are actually doing this in an ajax callback. I have made updates in my demo as well.

You can also achieve this with -

document.getElementById("mySelect").innerHTML = '<option value="2">2</option>';

Instead of just adding a value, why not consider adding a new option altogether?

Assign a value to a Select option using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Ensure modifications to a variable are restricted within an if statement

Capturing information from a modifiable table using Javascript

Is there a JavaScript alternative to wget for downloading files from a specified url?

Troubles with NextJS and TailwindCSS Styling

Storing an array within an AngularJS service for better performance

stop an html page from opening a new window

There was an issue when trying to process the Javascript data structure with JSON.parse

Encoding multiple arrays with JSON and PHP is a powerful feature that allows

Setting default values for Vue prop of type "Object"

There seems to be an issue with the visibility of the b-button within the b-table component in

Retrieving PHP variable within a JavaScript file

Implementing a Custom HTML Attribute to the Script Tag in Vue JS

Sharing Iframes across various Components within a Single Page Application (like Youtube)

Sending a File Object and Data to an MVC 6 Controller in ASP.NET 5 using JavaScript

Name of Document (changing from php to ?)

Step-by-step guide on making a table of objects using JavaScript

Jquery issue: Property or method is not supported by this object

Exploring the power of Vuejs3 with Internationalization and the Composition API

glsify - encountering the error message 'This file type could require a specific loader to be handled'?

Why does jQuery function properly in jsfiddle, but not in an HTML file?