Change select options when specified option in another select is selected
I'd like to know how to make something like this so this is the simple code:
<select id="cars">
<option value="default">Select a car</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes-Benz</option>
</select>
<select id="models">
<option value="">Select a model</option>
</select>
I've seen this post how to change a selections options based on another select option selected?
but in my version I want to have those options in an Array.
var modelsBmw = ["3", "5", "7"];
var modelsAudi = ["A4", "A6", "A8"];
var modelsMercedes = ["C", "E", "S"];
so when bmw is selected, in #models I wanna have items from modelsBmw. I tried this way:
$(document).ready(function() {
$("#cars").change(function() {
var val = $(this).val();
if(val=="bmw"){
$("#models").html(modelsBmw[val]);
}
else if(val=="audi"){
$("#models").html(modelsAudi[val]);
}
else if(val=="mercedes"){
$("#models").html(modelsMercedes[val]);
}
});
var modelsBmw = ["3", "5", "7"];
var modelsAudi = ["A4", "A6", "A8"];
var modelsMercedes = ["C", "E", "S"]; });
and also tried with a version without square brackets $("models").html(modelsBmw);
After trying these methods, I with my friend started trying to do that using for loop and it somehow worked, but we had a problem with appending item. I mean when we selected BMW everything was ok but then when you switched to Audi then the list was not only built with BMW elements but also Audi joined to it.
Unfortunately, he has gone to a job so I do not have access to this code version with the loop because we were working together using TeamViewer.
arrays forms options
edited Nov 18 '18 at 13:48
Sumithran
7673822
asked Nov 18 '18 at 13:33
fool.of.a.tookfool.of.a.took
12
add a comment |
I'd like to know how to make something like this so this is the simple code:
<select id="cars">
<option value="default">Select a car</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes-Benz</option>
</select>
<select id="models">
<option value="">Select a model</option>
</select>
I've seen this post how to change a selections options based on another select option selected?
but in my version I want to have those options in an Array.
var modelsBmw = ["3", "5", "7"];
var modelsAudi = ["A4", "A6", "A8"];
var modelsMercedes = ["C", "E", "S"];
so when bmw is selected, in #models I wanna have items from modelsBmw. I tried this way:
$(document).ready(function() {
$("#cars").change(function() {
var val = $(this).val();
if(val=="bmw"){
$("#models").html(modelsBmw[val]);
}
else if(val=="audi"){
$("#models").html(modelsAudi[val]);
}
else if(val=="mercedes"){
$("#models").html(modelsMercedes[val]);
}
});
var modelsBmw = ["3", "5", "7"];
var modelsAudi = ["A4", "A6", "A8"];
var modelsMercedes = ["C", "E", "S"]; });
and also tried with a version without square brackets $("models").html(modelsBmw);
After trying these methods, I with my friend started trying to do that using for loop and it somehow worked, but we had a problem with appending item. I mean when we selected BMW everything was ok but then when you switched to Audi then the list was not only built with BMW elements but also Audi joined to it.
Unfortunately, he has gone to a job so I do not have access to this code version with the loop because we were working together using TeamViewer.
arrays forms options
edited Nov 18 '18 at 13:48
Sumithran
7673822
asked Nov 18 '18 at 13:33
fool.of.a.tookfool.of.a.took
12
add a comment |
I'd like to know how to make something like this so this is the simple code:
<select id="cars">
<option value="default">Select a car</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes-Benz</option>
</select>
<select id="models">
<option value="">Select a model</option>
</select>
I've seen this post how to change a selections options based on another select option selected?
but in my version I want to have those options in an Array.
var modelsBmw = ["3", "5", "7"];
var modelsAudi = ["A4", "A6", "A8"];
var modelsMercedes = ["C", "E", "S"];
so when bmw is selected, in #models I wanna have items from modelsBmw. I tried this way:
$(document).ready(function() {
$("#cars").change(function() {
var val = $(this).val();
if(val=="bmw"){
$("#models").html(modelsBmw[val]);
}
else if(val=="audi"){
$("#models").html(modelsAudi[val]);
}
else if(val=="mercedes"){
$("#models").html(modelsMercedes[val]);
}
});
var modelsBmw = ["3", "5", "7"];
var modelsAudi = ["A4", "A6", "A8"];
var modelsMercedes = ["C", "E", "S"]; });
and also tried with a version without square brackets $("models").html(modelsBmw);
After trying these methods, I with my friend started trying to do that using for loop and it somehow worked, but we had a problem with appending item. I mean when we selected BMW everything was ok but then when you switched to Audi then the list was not only built with BMW elements but also Audi joined to it.
Unfortunately, he has gone to a job so I do not have access to this code version with the loop because we were working together using TeamViewer.
arrays forms options
edited Nov 18 '18 at 13:48
Sumithran
7673822
asked Nov 18 '18 at 13:33
fool.of.a.tookfool.of.a.took
12
I'd like to know how to make something like this so this is the simple code:
<select id="cars">
<option value="default">Select a car</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
<option value="mercedes">Mercedes-Benz</option>
</select>
<select id="models">
<option value="">Select a model</option>
</select>
I've seen this post how to change a selections options based on another select option selected?
but in my version I want to have those options in an Array.
var modelsBmw = ["3", "5", "7"];
var modelsAudi = ["A4", "A6", "A8"];
var modelsMercedes = ["C", "E", "S"];
so when bmw is selected, in #models I wanna have items from modelsBmw. I tried this way:
$(document).ready(function() {
$("#cars").change(function() {
var val = $(this).val();
if(val=="bmw"){
$("#models").html(modelsBmw[val]);
}
else if(val=="audi"){
$("#models").html(modelsAudi[val]);
}
else if(val=="mercedes"){
$("#models").html(modelsMercedes[val]);
}
});
var modelsBmw = ["3", "5", "7"];
var modelsAudi = ["A4", "A6", "A8"];
var modelsMercedes = ["C", "E", "S"]; });
and also tried with a version without square brackets $("models").html(modelsBmw);
After trying these methods, I with my friend started trying to do that using for loop and it somehow worked, but we had a problem with appending item. I mean when we selected BMW everything was ok but then when you switched to Audi then the list was not only built with BMW elements but also Audi joined to it.
Unfortunately, he has gone to a job so I do not have access to this code version with the loop because we were working together using TeamViewer.
arrays forms options
arrays forms options
edited Nov 18 '18 at 13:48
Sumithran
7673822
asked Nov 18 '18 at 13:33
fool.of.a.tookfool.of.a.took
12
edited Nov 18 '18 at 13:48
Sumithran
7673822
asked Nov 18 '18 at 13:33
fool.of.a.tookfool.of.a.took
12
edited Nov 18 '18 at 13:48
Sumithran
7673822
edited Nov 18 '18 at 13:48
Sumithran
7673822
edited Nov 18 '18 at 13:48
Sumithran
7673822
7673822
asked Nov 18 '18 at 13:33
fool.of.a.tookfool.of.a.took
12
asked Nov 18 '18 at 13:33
fool.of.a.tookfool.of.a.took
12
asked Nov 18 '18 at 13:33
fool.of.a.tookfool.of.a.took
12
12
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53361423%2fchange-select-options-when-specified-option-in-another-select-is-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53361423%2fchange-select-options-when-specified-option-in-another-select-is-selected%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
