Onchange jQuery Event for Dropdown
0
I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?
Codeply: https://www.codeply.com/go/M5JCiCq2qo
function myFunction() {
var x = document.getElementById("filter-extras").value;
document.getElementById("extra-filter").innerHTML = "You selected: " +
x;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div>Content for Fuel replacement</div>
<div>Content for Portable WiFi hotspot</div>
<div>Content for Post-trip cleaning</div>I think with jQuery it would be easier to do.
javascript jquery html
edited Nov 23 '18 at 18:58
Smollet777
1,3591015
asked Nov 23 '18 at 17:03
Ibadullah KhanIbadullah Khan
466
add a comment |
0
I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?
Codeply: https://www.codeply.com/go/M5JCiCq2qo
function myFunction() {
var x = document.getElementById("filter-extras").value;
document.getElementById("extra-filter").innerHTML = "You selected: " +
x;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div>Content for Fuel replacement</div>
<div>Content for Portable WiFi hotspot</div>
<div>Content for Post-trip cleaning</div>I think with jQuery it would be easier to do.
javascript jquery html
edited Nov 23 '18 at 18:58
Smollet777
1,3591015
asked Nov 23 '18 at 17:03
Ibadullah KhanIbadullah Khan
466
add a comment |
0
0
0
I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?
Codeply: https://www.codeply.com/go/M5JCiCq2qo
function myFunction() {
var x = document.getElementById("filter-extras").value;
document.getElementById("extra-filter").innerHTML = "You selected: " +
x;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div>Content for Fuel replacement</div>
<div>Content for Portable WiFi hotspot</div>
<div>Content for Post-trip cleaning</div>I think with jQuery it would be easier to do.
javascript jquery html
edited Nov 23 '18 at 18:58
Smollet777
1,3591015
asked Nov 23 '18 at 17:03
Ibadullah KhanIbadullah Khan
466
I have a dropdown with 3 selectors. I wanted to show the content of each of the selector onchange. Can someone help?
Codeply: https://www.codeply.com/go/M5JCiCq2qo
function myFunction() {
var x = document.getElementById("filter-extras").value;
document.getElementById("extra-filter").innerHTML = "You selected: " +
x;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div>Content for Fuel replacement</div>
<div>Content for Portable WiFi hotspot</div>
<div>Content for Post-trip cleaning</div>I think with jQuery it would be easier to do.
function myFunction() {
var x = document.getElementById("filter-extras").value;
document.getElementById("extra-filter").innerHTML = "You selected: " +
x;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div>Content for Fuel replacement</div>
<div>Content for Portable WiFi hotspot</div>
<div>Content for Post-trip cleaning</div>function myFunction() {
var x = document.getElementById("filter-extras").value;
document.getElementById("extra-filter").innerHTML = "You selected: " +
x;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" onchange="myFunction()" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div>Content for Fuel replacement</div>
<div>Content for Portable WiFi hotspot</div>
<div>Content for Post-trip cleaning</div>javascript jquery html
javascript jquery html
edited Nov 23 '18 at 18:58
Smollet777
1,3591015
asked Nov 23 '18 at 17:03
Ibadullah KhanIbadullah Khan
466
edited Nov 23 '18 at 18:58
Smollet777
1,3591015
asked Nov 23 '18 at 17:03
Ibadullah KhanIbadullah Khan
466
edited Nov 23 '18 at 18:58
Smollet777
1,3591015
edited Nov 23 '18 at 18:58
Smollet777
1,3591015
edited Nov 23 '18 at 18:58
Smollet777
1,3591015
1,3591015
asked Nov 23 '18 at 17:03
Ibadullah KhanIbadullah Khan
466
asked Nov 23 '18 at 17:03
Ibadullah KhanIbadullah Khan
466
asked Nov 23 '18 at 17:03
Ibadullah KhanIbadullah Khan
466
466
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
1
I tried to make two versions with identical behavior and default content displayed.
Here we simply check in forEach loop if id is equal to selected value:
document.getElementById('filter-extras').addEventListener('change', myFunction)
function myFunction() {
var x = document.getElementById('filter-extras').value;
document.querySelectorAll('.content').forEach(function(element) {
if (element.getAttribute('id') === x) {
element.style = 'display:block'
} else {
element.style = 'display:none'
}
});
}
myFunction()<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>$("#filter-extras").on("change", myFunction)
function myFunction() {
var x = $("#filter-extras").val();
$('.content').each(function() {
if ($(this).attr('id') === x) {
$(this).show()
} else {
$(this).hide()
}
})
}
myFunction()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>answered Nov 23 '18 at 18:19
Smollet777Smollet777
1,3591015
Worked like a charm! Thank you :)
– Ibadullah Khan
Nov 23 '18 at 21:57
add a comment |
2
This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:
var content = document.querySelectorAll('.content');
document.querySelector('#filter-extras').addEventListener('change', function() {
content.forEach(function(el) { el.style.display = 'none'; });
document.querySelector('#' + this.value).style.display = 'block';
});.content {
display: none;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>If you did want to do it in jQuery, here is the same logic translated:
var $content = $('.content');
$('#filter-extras').on('change', function() {
$content.hide();
$('#' + this.value).show();
});.content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>answered Nov 23 '18 at 17:18
Rory McCrossanRory McCrossan
242k29206245
The default content is not loading which is of "Fuel replacement" dropdown. Any luck?
– Ibadullah Khan
Nov 23 '18 at 17:41
add a comment |
0
I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code
// so in order to show the content of "Fuel replacement" as it is selected
$( function({
const contentToShow = $('#filter-extras').val();
$('#' + contentToShow).show();
// after this you can add the code here
$('#filter-extras').change(()=>{
// show hide content here
});
});
answered Nov 23 '18 at 18:19
AkhileshAkhilesh
626
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%2f53450570%2fonchange-jquery-event-for-dropdown%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I tried to make two versions with identical behavior and default content displayed.
Here we simply check in forEach loop if id is equal to selected value:
document.getElementById('filter-extras').addEventListener('change', myFunction)
function myFunction() {
var x = document.getElementById('filter-extras').value;
document.querySelectorAll('.content').forEach(function(element) {
if (element.getAttribute('id') === x) {
element.style = 'display:block'
} else {
element.style = 'display:none'
}
});
}
myFunction()<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>$("#filter-extras").on("change", myFunction)
function myFunction() {
var x = $("#filter-extras").val();
$('.content').each(function() {
if ($(this).attr('id') === x) {
$(this).show()
} else {
$(this).hide()
}
})
}
myFunction()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>answered Nov 23 '18 at 18:19
Smollet777Smollet777
1,3591015
Worked like a charm! Thank you :)
– Ibadullah Khan
Nov 23 '18 at 21:57
add a comment |
1
I tried to make two versions with identical behavior and default content displayed.
Here we simply check in forEach loop if id is equal to selected value:
document.getElementById('filter-extras').addEventListener('change', myFunction)
function myFunction() {
var x = document.getElementById('filter-extras').value;
document.querySelectorAll('.content').forEach(function(element) {
if (element.getAttribute('id') === x) {
element.style = 'display:block'
} else {
element.style = 'display:none'
}
});
}
myFunction()<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>$("#filter-extras").on("change", myFunction)
function myFunction() {
var x = $("#filter-extras").val();
$('.content').each(function() {
if ($(this).attr('id') === x) {
$(this).show()
} else {
$(this).hide()
}
})
}
myFunction()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>answered Nov 23 '18 at 18:19
Smollet777Smollet777
1,3591015
Worked like a charm! Thank you :)
– Ibadullah Khan
Nov 23 '18 at 21:57
add a comment |
1
1
1
I tried to make two versions with identical behavior and default content displayed.
Here we simply check in forEach loop if id is equal to selected value:
document.getElementById('filter-extras').addEventListener('change', myFunction)
function myFunction() {
var x = document.getElementById('filter-extras').value;
document.querySelectorAll('.content').forEach(function(element) {
if (element.getAttribute('id') === x) {
element.style = 'display:block'
} else {
element.style = 'display:none'
}
});
}
myFunction()<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>$("#filter-extras").on("change", myFunction)
function myFunction() {
var x = $("#filter-extras").val();
$('.content').each(function() {
if ($(this).attr('id') === x) {
$(this).show()
} else {
$(this).hide()
}
})
}
myFunction()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>answered Nov 23 '18 at 18:19
Smollet777Smollet777
1,3591015
I tried to make two versions with identical behavior and default content displayed.
Here we simply check in forEach loop if id is equal to selected value:
document.getElementById('filter-extras').addEventListener('change', myFunction)
function myFunction() {
var x = document.getElementById('filter-extras').value;
document.querySelectorAll('.content').forEach(function(element) {
if (element.getAttribute('id') === x) {
element.style = 'display:block'
} else {
element.style = 'display:none'
}
});
}
myFunction()<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>$("#filter-extras").on("change", myFunction)
function myFunction() {
var x = $("#filter-extras").val();
$('.content').each(function() {
if ($(this).attr('id') === x) {
$(this).show()
} else {
$(this).hide()
}
})
}
myFunction()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>document.getElementById('filter-extras').addEventListener('change', myFunction)
function myFunction() {
var x = document.getElementById('filter-extras').value;
document.querySelectorAll('.content').forEach(function(element) {
if (element.getAttribute('id') === x) {
element.style = 'display:block'
} else {
element.style = 'display:none'
}
});
}
myFunction()<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>document.getElementById('filter-extras').addEventListener('change', myFunction)
function myFunction() {
var x = document.getElementById('filter-extras').value;
document.querySelectorAll('.content').forEach(function(element) {
if (element.getAttribute('id') === x) {
element.style = 'display:block'
} else {
element.style = 'display:none'
}
});
}
myFunction()<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>$("#filter-extras").on("change", myFunction)
function myFunction() {
var x = $("#filter-extras").val();
$('.content').each(function() {
if ($(this).attr('id') === x) {
$(this).show()
} else {
$(this).hide()
}
})
}
myFunction()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>$("#filter-extras").on("change", myFunction)
function myFunction() {
var x = $("#filter-extras").val();
$('.content').each(function() {
if ($(this).attr('id') === x) {
$(this).show()
} else {
$(this).hide()
}
})
}
myFunction()<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div id="fuel" class="content">Content for Fuel replacement</div>
<div id="wifi" class="content">Content for Portable WiFi hotspot</div>
<div id="cleaning" class="content">Content for Post-trip cleaning</div>answered Nov 23 '18 at 18:19
Smollet777Smollet777
1,3591015
answered Nov 23 '18 at 18:19
Smollet777Smollet777
1,3591015
answered Nov 23 '18 at 18:19
Smollet777Smollet777
1,3591015
answered Nov 23 '18 at 18:19
Smollet777Smollet777
1,3591015
1,3591015
Worked like a charm! Thank you :)
– Ibadullah Khan
Nov 23 '18 at 21:57
add a comment |
Worked like a charm! Thank you :)
– Ibadullah Khan
Nov 23 '18 at 21:57
Worked like a charm! Thank you :)
– Ibadullah Khan
Nov 23 '18 at 21:57
Worked like a charm! Thank you :)
– Ibadullah Khan
Nov 23 '18 at 21:57
add a comment |
2
This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:
var content = document.querySelectorAll('.content');
document.querySelector('#filter-extras').addEventListener('change', function() {
content.forEach(function(el) { el.style.display = 'none'; });
document.querySelector('#' + this.value).style.display = 'block';
});.content {
display: none;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>If you did want to do it in jQuery, here is the same logic translated:
var $content = $('.content');
$('#filter-extras').on('change', function() {
$content.hide();
$('#' + this.value).show();
});.content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>answered Nov 23 '18 at 17:18
Rory McCrossanRory McCrossan
242k29206245
The default content is not loading which is of "Fuel replacement" dropdown. Any luck?
– Ibadullah Khan
Nov 23 '18 at 17:41
add a comment |
2
This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:
var content = document.querySelectorAll('.content');
document.querySelector('#filter-extras').addEventListener('change', function() {
content.forEach(function(el) { el.style.display = 'none'; });
document.querySelector('#' + this.value).style.display = 'block';
});.content {
display: none;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>If you did want to do it in jQuery, here is the same logic translated:
var $content = $('.content');
$('#filter-extras').on('change', function() {
$content.hide();
$('#' + this.value).show();
});.content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>answered Nov 23 '18 at 17:18
Rory McCrossanRory McCrossan
242k29206245
The default content is not loading which is of "Fuel replacement" dropdown. Any luck?
– Ibadullah Khan
Nov 23 '18 at 17:41
add a comment |
2
2
2
This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:
var content = document.querySelectorAll('.content');
document.querySelector('#filter-extras').addEventListener('change', function() {
content.forEach(function(el) { el.style.display = 'none'; });
document.querySelector('#' + this.value).style.display = 'block';
});.content {
display: none;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>If you did want to do it in jQuery, here is the same logic translated:
var $content = $('.content');
$('#filter-extras').on('change', function() {
$content.hide();
$('#' + this.value).show();
});.content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>answered Nov 23 '18 at 17:18
Rory McCrossanRory McCrossan
242k29206245
This can still be done quite easily with plain JS. You just need to add the change event handler to the select, then you can use the value chosen to select the content to show and hide all the others, something like this:
var content = document.querySelectorAll('.content');
document.querySelector('#filter-extras').addEventListener('change', function() {
content.forEach(function(el) { el.style.display = 'none'; });
document.querySelector('#' + this.value).style.display = 'block';
});.content {
display: none;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>If you did want to do it in jQuery, here is the same logic translated:
var $content = $('.content');
$('#filter-extras').on('change', function() {
$content.hide();
$('#' + this.value).show();
});.content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>var content = document.querySelectorAll('.content');
document.querySelector('#filter-extras').addEventListener('change', function() {
content.forEach(function(el) { el.style.display = 'none'; });
document.querySelector('#' + this.value).style.display = 'block';
});.content {
display: none;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>var content = document.querySelectorAll('.content');
document.querySelector('#filter-extras').addEventListener('change', function() {
content.forEach(function(el) { el.style.display = 'none'; });
document.querySelector('#' + this.value).style.display = 'block';
});.content {
display: none;
}<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>var $content = $('.content');
$('#filter-extras').on('change', function() {
$content.hide();
$('#' + this.value).show();
});.content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>var $content = $('.content');
$('#filter-extras').on('change', function() {
$content.hide();
$('#' + this.value).show();
});.content {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="col-md-12 pl-0">Select Type</label>
<select class="form-control custom-select mb-3 col-md-4" id="filter-extras">
<option selected="selected" value="fuel">Fuel replacement</option>
<option value="wifi">Portable WiFi hotspot</option>
<option value="cleaning">Post-trip cleaning</option>
</select>
<div class="content" id="fuel">Content for Fuel replacement</div>
<div class="content" id="wifi">Content for Portable WiFi hotspot</div>
<div class="content" id="cleaning">Content for Post-trip cleaning</div>answered Nov 23 '18 at 17:18
Rory McCrossanRory McCrossan
242k29206245
answered Nov 23 '18 at 17:18
Rory McCrossanRory McCrossan
242k29206245
answered Nov 23 '18 at 17:18
Rory McCrossanRory McCrossan
242k29206245
answered Nov 23 '18 at 17:18
Rory McCrossanRory McCrossan
242k29206245
242k29206245
The default content is not loading which is of "Fuel replacement" dropdown. Any luck?
– Ibadullah Khan
Nov 23 '18 at 17:41
add a comment |
The default content is not loading which is of "Fuel replacement" dropdown. Any luck?
– Ibadullah Khan
Nov 23 '18 at 17:41
The default content is not loading which is of "Fuel replacement" dropdown. Any luck?
– Ibadullah Khan
Nov 23 '18 at 17:41
The default content is not loading which is of "Fuel replacement" dropdown. Any luck?
– Ibadullah Khan
Nov 23 '18 at 17:41
add a comment |
0
I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code
// so in order to show the content of "Fuel replacement" as it is selected
$( function({
const contentToShow = $('#filter-extras').val();
$('#' + contentToShow).show();
// after this you can add the code here
$('#filter-extras').change(()=>{
// show hide content here
});
});
answered Nov 23 '18 at 18:19
AkhileshAkhilesh
626
add a comment |
0
I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code
// so in order to show the content of "Fuel replacement" as it is selected
$( function({
const contentToShow = $('#filter-extras').val();
$('#' + contentToShow).show();
// after this you can add the code here
$('#filter-extras').change(()=>{
// show hide content here
});
});
answered Nov 23 '18 at 18:19
AkhileshAkhilesh
626
add a comment |
0
0
0
I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code
// so in order to show the content of "Fuel replacement" as it is selected
$( function({
const contentToShow = $('#filter-extras').val();
$('#' + contentToShow).show();
// after this you can add the code here
$('#filter-extras').change(()=>{
// show hide content here
});
});
answered Nov 23 '18 at 18:19
AkhileshAkhilesh
626
I think you already got your answer but if you want to show selected content by default on load then you should add this line to you code
// so in order to show the content of "Fuel replacement" as it is selected
$( function({
const contentToShow = $('#filter-extras').val();
$('#' + contentToShow).show();
// after this you can add the code here
$('#filter-extras').change(()=>{
// show hide content here
});
});
answered Nov 23 '18 at 18:19
AkhileshAkhilesh
626
answered Nov 23 '18 at 18:19
AkhileshAkhilesh
626
answered Nov 23 '18 at 18:19
AkhileshAkhilesh
626
answered Nov 23 '18 at 18:19
AkhileshAkhilesh
626
626
add a comment |
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%2f53450570%2fonchange-jquery-event-for-dropdown%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
