Mixing
How can I use .show() when I use multiple selected options in javascript
0
I am trying to show a select box if selected value with previous selected value. previous select box is with multiple select option. when I select 2 or more options hide what am trying to show select box.
This is my HTML & JS code.
$('.show1').on('change', function() {
var optionSelected1 = $("option:selected", this);
var valueSelected1 = this.value;
if (valueSelected1 == "කාර්") {
$("#text_area1").show();
} else {
$("#text_area1").hide();
}
});
$('#text_area1').ready(function() {
$("#text_area1").hide();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කල්පවත්නා භාණ්ඩ හිමිකම සඳහන් කරන්න</label>
<div class="col-sm-12">
<select class="form-control col-sm-12 js-example-basic-multiple show1" name="media" multiple="multiple">
<option value="ෆි්‍රජ්">ෆි්‍රජ්</option>
<option value="කාර්">කාර්</option>
<option value="රූපවාහිනී">රූපවාහිනී</option>
<option value="රෙදි සෝදන යන්ත්‍ර">රෙදි සෝදන යන්ත්‍ර</option>
<option value="Cable TV">Cable TV</option>
<option value="මෝටර් සයිකල්">මෝටර් සයිකල්</option>
<option value="ලැප්ටොප්">ලැප්ටොප්</option>
<option value="Gas cooker">Gas cooker</option>
<option value="Micro Wave">Micro Wave</option>
</select>
</div>
</div>
<div id="text_area1" class="form-group row">
<label class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කරයේ වටිනාකම</label>
<div class="col-sm-12">
<select id="show1" class="form-control col-sm-12" name="media">
<option value="මිලියන 3 ට අඩු">මිලියන 3 ට අඩු</option>
<option value="මිලියන 3 ජ් 10 අතර">මිලියන 3 ජ් 10 අතර</option>
<option value="මිලියන 10 ට වැඩි">මිලියන 10 ට වැඩි</option>
</select>
</div>
</div>
</div>javascript jquery
edited Nov 20 '18 at 14:54
Ian Gilroy
1,8661213
asked Nov 20 '18 at 14:19
Sanjaya Sanjaya
75
add a comment |
0
I am trying to show a select box if selected value with previous selected value. previous select box is with multiple select option. when I select 2 or more options hide what am trying to show select box.
This is my HTML & JS code.
$('.show1').on('change', function() {
var optionSelected1 = $("option:selected", this);
var valueSelected1 = this.value;
if (valueSelected1 == "කාර්") {
$("#text_area1").show();
} else {
$("#text_area1").hide();
}
});
$('#text_area1').ready(function() {
$("#text_area1").hide();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කල්පවත්නා භාණ්ඩ හිමිකම සඳහන් කරන්න</label>
<div class="col-sm-12">
<select class="form-control col-sm-12 js-example-basic-multiple show1" name="media" multiple="multiple">
<option value="ෆි්‍රජ්">ෆි්‍රජ්</option>
<option value="කාර්">කාර්</option>
<option value="රූපවාහිනී">රූපවාහිනී</option>
<option value="රෙදි සෝදන යන්ත්‍ර">රෙදි සෝදන යන්ත්‍ර</option>
<option value="Cable TV">Cable TV</option>
<option value="මෝටර් සයිකල්">මෝටර් සයිකල්</option>
<option value="ලැප්ටොප්">ලැප්ටොප්</option>
<option value="Gas cooker">Gas cooker</option>
<option value="Micro Wave">Micro Wave</option>
</select>
</div>
</div>
<div id="text_area1" class="form-group row">
<label class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කරයේ වටිනාකම</label>
<div class="col-sm-12">
<select id="show1" class="form-control col-sm-12" name="media">
<option value="මිලියන 3 ට අඩු">මිලියන 3 ට අඩු</option>
<option value="මිලියන 3 ජ් 10 අතර">මිලියන 3 ජ් 10 අතර</option>
<option value="මිලියන 10 ට වැඩි">මිලියන 10 ට වැඩි</option>
</select>
</div>
</div>
</div>javascript jquery
edited Nov 20 '18 at 14:54
Ian Gilroy
1,8661213
asked Nov 20 '18 at 14:19
Sanjaya Sanjaya
75
1
To select by id,$('.show1').on...should be$('#show1').on...
– peeebeee
Nov 20 '18 at 14:28
You should check this link similar you problem. [ multiple select show/hide](stackoverflow.com/questions/24204619/…)
– Error au
Nov 20 '18 at 14:38
@peeebeee I need it check with class name. I got the correct answer from Thomas. Thanks for your support..
– Sanjaya
Nov 20 '18 at 15:42
add a comment |
0
0
0
I am trying to show a select box if selected value with previous selected value. previous select box is with multiple select option. when I select 2 or more options hide what am trying to show select box.
This is my HTML & JS code.
$('.show1').on('change', function() {
var optionSelected1 = $("option:selected", this);
var valueSelected1 = this.value;
if (valueSelected1 == "කාර්") {
$("#text_area1").show();
} else {
$("#text_area1").hide();
}
});
$('#text_area1').ready(function() {
$("#text_area1").hide();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කල්පවත්නා භාණ්ඩ හිමිකම සඳහන් කරන්න</label>
<div class="col-sm-12">
<select class="form-control col-sm-12 js-example-basic-multiple show1" name="media" multiple="multiple">
<option value="ෆි්‍රජ්">ෆි්‍රජ්</option>
<option value="කාර්">කාර්</option>
<option value="රූපවාහිනී">රූපවාහිනී</option>
<option value="රෙදි සෝදන යන්ත්‍ර">රෙදි සෝදන යන්ත්‍ර</option>
<option value="Cable TV">Cable TV</option>
<option value="මෝටර් සයිකල්">මෝටර් සයිකල්</option>
<option value="ලැප්ටොප්">ලැප්ටොප්</option>
<option value="Gas cooker">Gas cooker</option>
<option value="Micro Wave">Micro Wave</option>
</select>
</div>
</div>
<div id="text_area1" class="form-group row">
<label class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කරයේ වටිනාකම</label>
<div class="col-sm-12">
<select id="show1" class="form-control col-sm-12" name="media">
<option value="මිලියන 3 ට අඩු">මිලියන 3 ට අඩු</option>
<option value="මිලියන 3 ජ් 10 අතර">මිලියන 3 ජ් 10 අතර</option>
<option value="මිලියන 10 ට වැඩි">මිලියන 10 ට වැඩි</option>
</select>
</div>
</div>
</div>javascript jquery
edited Nov 20 '18 at 14:54
Ian Gilroy
1,8661213
asked Nov 20 '18 at 14:19
Sanjaya Sanjaya
75
I am trying to show a select box if selected value with previous selected value. previous select box is with multiple select option. when I select 2 or more options hide what am trying to show select box.
This is my HTML & JS code.
$('.show1').on('change', function() {
var optionSelected1 = $("option:selected", this);
var valueSelected1 = this.value;
if (valueSelected1 == "කාර්") {
$("#text_area1").show();
} else {
$("#text_area1").hide();
}
});
$('#text_area1').ready(function() {
$("#text_area1").hide();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කල්පවත්නා භාණ්ඩ හිමිකම සඳහන් කරන්න</label>
<div class="col-sm-12">
<select class="form-control col-sm-12 js-example-basic-multiple show1" name="media" multiple="multiple">
<option value="ෆි්‍රජ්">ෆි්‍රජ්</option>
<option value="කාර්">කාර්</option>
<option value="රූපවාහිනී">රූපවාහිනී</option>
<option value="රෙදි සෝදන යන්ත්‍ර">රෙදි සෝදන යන්ත්‍ර</option>
<option value="Cable TV">Cable TV</option>
<option value="මෝටර් සයිකල්">මෝටර් සයිකල්</option>
<option value="ලැප්ටොප්">ලැප්ටොප්</option>
<option value="Gas cooker">Gas cooker</option>
<option value="Micro Wave">Micro Wave</option>
</select>
</div>
</div>
<div id="text_area1" class="form-group row">
<label class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කරයේ වටිනාකම</label>
<div class="col-sm-12">
<select id="show1" class="form-control col-sm-12" name="media">
<option value="මිලියන 3 ට අඩු">මිලියන 3 ට අඩු</option>
<option value="මිලියන 3 ජ් 10 අතර">මිලියන 3 ජ් 10 අතර</option>
<option value="මිලියන 10 ට වැඩි">මිලියන 10 ට වැඩි</option>
</select>
</div>
</div>
</div>$('.show1').on('change', function() {
var optionSelected1 = $("option:selected", this);
var valueSelected1 = this.value;
if (valueSelected1 == "කාර්") {
$("#text_area1").show();
} else {
$("#text_area1").hide();
}
});
$('#text_area1').ready(function() {
$("#text_area1").hide();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කල්පවත්නා භාණ්ඩ හිමිකම සඳහන් කරන්න</label>
<div class="col-sm-12">
<select class="form-control col-sm-12 js-example-basic-multiple show1" name="media" multiple="multiple">
<option value="ෆි්‍රජ්">ෆි්‍රජ්</option>
<option value="කාර්">කාර්</option>
<option value="රූපවාහිනී">රූපවාහිනී</option>
<option value="රෙදි සෝදන යන්ත්‍ර">රෙදි සෝදන යන්ත්‍ර</option>
<option value="Cable TV">Cable TV</option>
<option value="මෝටර් සයිකල්">මෝටර් සයිකල්</option>
<option value="ලැප්ටොප්">ලැප්ටොප්</option>
<option value="Gas cooker">Gas cooker</option>
<option value="Micro Wave">Micro Wave</option>
</select>
</div>
</div>
<div id="text_area1" class="form-group row">
<label class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කරයේ වටිනාකම</label>
<div class="col-sm-12">
<select id="show1" class="form-control col-sm-12" name="media">
<option value="මිලියන 3 ට අඩු">මිලියන 3 ට අඩු</option>
<option value="මිලියන 3 ජ් 10 අතර">මිලියන 3 ජ් 10 අතර</option>
<option value="මිලියන 10 ට වැඩි">මිලියන 10 ට වැඩි</option>
</select>
</div>
</div>
</div>$('.show1').on('change', function() {
var optionSelected1 = $("option:selected", this);
var valueSelected1 = this.value;
if (valueSelected1 == "කාර්") {
$("#text_area1").show();
} else {
$("#text_area1").hide();
}
});
$('#text_area1').ready(function() {
$("#text_area1").hide();
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කල්පවත්නා භාණ්ඩ හිමිකම සඳහන් කරන්න</label>
<div class="col-sm-12">
<select class="form-control col-sm-12 js-example-basic-multiple show1" name="media" multiple="multiple">
<option value="ෆි්‍රජ්">ෆි්‍රජ්</option>
<option value="කාර්">කාර්</option>
<option value="රූපවාහිනී">රූපවාහිනී</option>
<option value="රෙදි සෝදන යන්ත්‍ර">රෙදි සෝදන යන්ත්‍ර</option>
<option value="Cable TV">Cable TV</option>
<option value="මෝටර් සයිකල්">මෝටර් සයිකල්</option>
<option value="ලැප්ටොප්">ලැප්ටොප්</option>
<option value="Gas cooker">Gas cooker</option>
<option value="Micro Wave">Micro Wave</option>
</select>
</div>
</div>
<div id="text_area1" class="form-group row">
<label class="col-sm-12 col-form-label col-form-label-sm mb-md-3">ඔබගේ කරයේ වටිනාකම</label>
<div class="col-sm-12">
<select id="show1" class="form-control col-sm-12" name="media">
<option value="මිලියන 3 ට අඩු">මිලියන 3 ට අඩු</option>
<option value="මිලියන 3 ජ් 10 අතර">මිලියන 3 ජ් 10 අතර</option>
<option value="මිලියන 10 ට වැඩි">මිලියන 10 ට වැඩි</option>
</select>
</div>
</div>
</div>javascript jquery
javascript jquery
edited Nov 20 '18 at 14:54
Ian Gilroy
1,8661213
asked Nov 20 '18 at 14:19
Sanjaya Sanjaya
75
edited Nov 20 '18 at 14:54
Ian Gilroy
1,8661213
asked Nov 20 '18 at 14:19
Sanjaya Sanjaya
75
edited Nov 20 '18 at 14:54
Ian Gilroy
1,8661213
edited Nov 20 '18 at 14:54
Ian Gilroy
1,8661213
edited Nov 20 '18 at 14:54
Ian Gilroy
1,8661213
1,8661213
asked Nov 20 '18 at 14:19
Sanjaya Sanjaya
75
asked Nov 20 '18 at 14:19
Sanjaya Sanjaya
75
asked Nov 20 '18 at 14:19
Sanjaya Sanjaya
75
75
1
To select by id,$('.show1').on...should be$('#show1').on...
– peeebeee
Nov 20 '18 at 14:28
You should check this link similar you problem. [ multiple select show/hide](stackoverflow.com/questions/24204619/…)
– Error au
Nov 20 '18 at 14:38
@peeebeee I need it check with class name. I got the correct answer from Thomas. Thanks for your support..
– Sanjaya
Nov 20 '18 at 15:42
add a comment |
1
To select by id,$('.show1').on...should be$('#show1').on...
– peeebeee
Nov 20 '18 at 14:28
You should check this link similar you problem. [ multiple select show/hide](stackoverflow.com/questions/24204619/…)
– Error au
Nov 20 '18 at 14:38
@peeebeee I need it check with class name. I got the correct answer from Thomas. Thanks for your support..
– Sanjaya
Nov 20 '18 at 15:42
1
1
To select by id,
$('.show1').on... should be $('#show1').on...– peeebeee
Nov 20 '18 at 14:28
To select by id,
$('.show1').on... should be $('#show1').on...– peeebeee
Nov 20 '18 at 14:28
You should check this link similar you problem. [ multiple select show/hide](stackoverflow.com/questions/24204619/…)
– Error au
Nov 20 '18 at 14:38
You should check this link similar you problem. [ multiple select show/hide](stackoverflow.com/questions/24204619/…)
– Error au
Nov 20 '18 at 14:38
@peeebeee I need it check with class name. I got the correct answer from Thomas. Thanks for your support..
– Sanjaya
Nov 20 '18 at 15:42
@peeebeee I need it check with class name. I got the correct answer from Thomas. Thanks for your support..
– Sanjaya
Nov 20 '18 at 15:42
add a comment |
1 Answer
1
active
oldest
votes
0
Convert selected option(s) to an Array type, then use the Array.prototype.some() to check if the value has been selected:
$(".show1").on("change", function() {
const isSelected = Array.from($(this).find("option:selected")).some(
e => e.value === "කාර්"
);
isSelected ? $("#text_area1").show() : $("#text_area1").hide();
});
answered Nov 20 '18 at 14:36
Gary ThomasGary Thomas
1,1081412
Thanks. It's work...
– Sanjaya
Nov 20 '18 at 15:39
add a comment |
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
});
}
});
draft saved
draft discarded
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%2f53395031%2fhow-can-i-use-show-when-i-use-multiple-selected-options-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Convert selected option(s) to an Array type, then use the Array.prototype.some() to check if the value has been selected:
$(".show1").on("change", function() {
const isSelected = Array.from($(this).find("option:selected")).some(
e => e.value === "කාර්"
);
isSelected ? $("#text_area1").show() : $("#text_area1").hide();
});
answered Nov 20 '18 at 14:36
Gary ThomasGary Thomas
1,1081412
Thanks. It's work...
– Sanjaya
Nov 20 '18 at 15:39
add a comment |
0
Convert selected option(s) to an Array type, then use the Array.prototype.some() to check if the value has been selected:
$(".show1").on("change", function() {
const isSelected = Array.from($(this).find("option:selected")).some(
e => e.value === "කාර්"
);
isSelected ? $("#text_area1").show() : $("#text_area1").hide();
});
answered Nov 20 '18 at 14:36
Gary ThomasGary Thomas
1,1081412
Thanks. It's work...
– Sanjaya
Nov 20 '18 at 15:39
add a comment |
0
0
0
Convert selected option(s) to an Array type, then use the Array.prototype.some() to check if the value has been selected:
$(".show1").on("change", function() {
const isSelected = Array.from($(this).find("option:selected")).some(
e => e.value === "කාර්"
);
isSelected ? $("#text_area1").show() : $("#text_area1").hide();
});
answered Nov 20 '18 at 14:36
Gary ThomasGary Thomas
1,1081412
Convert selected option(s) to an Array type, then use the Array.prototype.some() to check if the value has been selected:
$(".show1").on("change", function() {
const isSelected = Array.from($(this).find("option:selected")).some(
e => e.value === "කාර්"
);
isSelected ? $("#text_area1").show() : $("#text_area1").hide();
});
answered Nov 20 '18 at 14:36
Gary ThomasGary Thomas
1,1081412
answered Nov 20 '18 at 14:36
Gary ThomasGary Thomas
1,1081412
answered Nov 20 '18 at 14:36
Gary ThomasGary Thomas
1,1081412
answered Nov 20 '18 at 14:36
Gary ThomasGary Thomas
1,1081412
1,1081412
Thanks. It's work...
– Sanjaya
Nov 20 '18 at 15:39
add a comment |
Thanks. It's work...
– Sanjaya
Nov 20 '18 at 15:39
Thanks. It's work...
– Sanjaya
Nov 20 '18 at 15:39
Thanks. It's work...
– Sanjaya
Nov 20 '18 at 15:39
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53395031%2fhow-can-i-use-show-when-i-use-multiple-selected-options-in-javascript%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
1
To select by id,
$('.show1').on...should be$('#show1').on...– peeebeee
Nov 20 '18 at 14:28
You should check this link similar you problem. [ multiple select show/hide](stackoverflow.com/questions/24204619/…)
– Error au
Nov 20 '18 at 14:38
@peeebeee I need it check with class name. I got the correct answer from Thomas. Thanks for your support..
– Sanjaya
Nov 20 '18 at 15:42