/    Sign up×
Community /Pin to ProfileBookmark

Automatically load in select options and retrieve values

Copy linkTweet thisAlerts:
Dec 16.2019

Hey guys,

I’m stuck on this select drop-down feature on my project. So I want to load in the options for the select from a back-end api and I was able to do this with this snippet:

`var keys = Object.keys(resp.msg.cohorts);
let $dropdown = $(‘#cohortType’);
$dropdown.empty();
$.each(keys, function(index,item) {
$(‘<option></option>’)
.attr(‘value’, index)
.text(item)
.appendTo($dropdown);
});`

But where I’m stuck is, when I hit the submit button once you select an option, I want to retrieve the values associated with the key (the option the user chooses). Any idea how I may approach this?

Structure of the api data:
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-12-16/1576508414-670413-screen-shot-2019-12-16-at-95904-am.png]

Any suggestions is very much appreciated!

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumDec 16.2019 — When you apply a name to your select, the value of the selected option will be available as a GET or POST parameter.
Copy linkTweet thisAlerts:
@heartstringsauthorDec 16.2019 — @Sempervivum#1611891 Could you please elaborate on that?
Copy linkTweet thisAlerts:
@SempervivumDec 16.2019 — Sorry, I should have read more carefully. Unfortunately the cohorts are not simple values but arrays. In order to be able to access a cohort from the option having been selected you need to assign the key as a value to you option:
$.each(keys, function(index,item) {
$('&lt;option&gt;&lt;/option&gt;')
.attr('value', item) // item is the key of the cohort
.text(item)
.appendTo($dropdown);
});
Then you can access the array like this after an option has been selected:
var key = document.getElementById('id-of-your-select').value;
var cohort = resp.msg.cohorts[key]
Copy linkTweet thisAlerts:
@heartstringsauthorDec 17.2019 — @Sempervivum#1611893 I tried this and did console.log(cohort) but unfortunately it's giving me this error: Uncaught TypeError: Cannot read property 'value' of null
Copy linkTweet thisAlerts:
@SempervivumDec 17.2019 — Did you replace `id-of-your-select</C> by your own ID? The line should read<br/>
<C>var key = document.getElementById('cohortType').value;`
Copy linkTweet thisAlerts:
@heartstringsauthorDec 17.2019 — @Sempervivum#1611893 Nevermind I was using a id selector '#' in the document.getElementById. It's working perfectly fine now, thank you very much!
Copy linkTweet thisAlerts:
@SempervivumDec 17.2019 — I see, that's fine that it works now!
×

Success!

Help @heartstrings spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...