CODEWITHSUNDEEP
javascriptjqueryhtml
flashsplat
flashsplat

Reputation: 537

Jquery - Set selected option by value not working

I've tried all the solutions from google. What am I missing? The option I want is not being selected. Here's the section of code i'm having trouble with. I've included some other things I've tried (commented out).

If it matters, this list is built dynamically, but the code to select it by value is after that process. i'm in Chrome Version 80.0.3987.149

// EDIT ADDED THIS CODE FROM MY APPLICATION
const url = '/api/Customers';

// Populate dropdown
$.getJSON(url, function (data) {
    $.each(data, function (key, entry) {
        dropdown.append($('<option></option>').attr('value', entry.CustomerID).text(entry.Name + ' - ' + entry.Email));
    })
});
// END EDIT ^^^^^

//var customerID = window.location.hash;
var customerID = "6a1920b2-f388-4790-a720-75048e1407a7"; //Test User 5
console.log(customerID);

//$('#customer-dropdown option[value="'+ customerID +'"]').prop('selected', true);
//$("#customer-dropdown select").val(customerID);
$("#customer-dropdown option[data-value='" + customerID +"']").attr("selected","selected");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="customer-dropdown" name="c15905d7-8216-4e81-ac15-2fafd10b49e8">
	<option disabled="">Select Customer</option>
	<option value="297f8676-80bf-43e5-b463-031a5b5154aa">Test User 1</option>
	<option value="83941899-8039-488f-bf6b-0d036c7d6556">Test User 2</option>
	<option value="263356fd-d803-4436-a7fc-4df5a3095771">Test User 3</option>
	<option value="2e31ee49-b096-4237-b07e-61071871334d">Test User 4</option>
	<option value="6a1920b2-f388-4790-a720-75048e1407a7">Test User 5</option>
	<option value="072f6800-570c-4004-b9cd-7bdb4cf98b0a">Test User 6</option>
	<option value="c957f2c0-f72e-4de7-9b4f-9272cbbfd783">Test User 7</option>
	<option value="d870225f-c020-4369-bd7b-9dc5d16f34a1">Test User 8</option>
</select>

Upvotes: 2

Views: 3390

Answers (2)

flashsplat
flashsplat

Reputation: 537

This ended up being my solution to combat the timing issue introduced by .getJSON (async):

I just selected it as I built the dropdown:

$.getJSON(url, function (data) {
    $.each(data, function (key, entry) {
        //console.log(entry.CustomerID + " | " + customerID + " | " + (entry.CustomerID == customerID))
        if (entry.CustomerID == customerID) {
            dropdown.append($('<option></option>').attr({ value: entry.CustomerID, selected: "selected" }).text(entry.Name + ' - ' + entry.Email));
            dropdown.val(customerID);
        } else {
            dropdown.append($('<option></option>').attr('value', entry.CustomerID).text(entry.Name + ' - ' + entry.Email));
        }
    })
});

Upvotes: 0

Chaska
Chaska

Reputation: 3205

Simply assign the value to select.

//var customerID = window.location.hash;
var customerID = "6a1920b2-f388-4790-a720-75048e1407a7"; //Test User 5

//$('#customer-dropdown option[value="'+ customerID +'"]').prop('selected', true);
//$("#customer-dropdown select").val(customerID);
$("#customer-dropdown").val(customerID);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="customer-dropdown" name="c15905d7-8216-4e81-ac15-2fafd10b49e8">
	<option disabled="">Select Customer</option>
	<option value="297f8676-80bf-43e5-b463-031a5b5154aa">Test User 1</option>
	<option value="83941899-8039-488f-bf6b-0d036c7d6556">Test User 2</option>
	<option value="263356fd-d803-4436-a7fc-4df5a3095771">Test User 3</option>
	<option value="2e31ee49-b096-4237-b07e-61071871334d">Test User 4</option>
	<option value="6a1920b2-f388-4790-a720-75048e1407a7">Test User 5</option>
	<option value="072f6800-570c-4004-b9cd-7bdb4cf98b0a">Test User 6</option>
	<option value="c957f2c0-f72e-4de7-9b4f-9272cbbfd783">Test User 7</option>
	<option value="d870225f-c020-4369-bd7b-9dc5d16f34a1">Test User 8</option>
</select>

Upvotes: 1

Related Questions