Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I need if selected number 1 or 2 or 7 the div id show but if the other number div hide
<select class="custom-select" id="selectEmployer">
<option selected>Vyberte</option>
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
<option value="5">Employer 5</option>
<option value="6">Employer 6</option>
<option value="7">Employer 7</option>
</select>
<div id="employer">SHOW</div>
You can do something like this:
$("#selectEmployer").change(function() {
$("#employer").hide();
if ($.inArray($(this).val(), ["1", "2", "7"]) > -1) {
$("#employer").show();
}
})
Demo
$("#selectEmployer").change(function() {
$("#employer").hide();
if ($.inArray($(this).val(), ["1", "2", "7"]) > -1) {
$("#employer").show();
}
})
#employer {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="custom-select" id="selectEmployer">
<option selected>Vyberte</option>
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
<option value="5">Employer 5</option>
<option value="6">Employer 6</option>
<option value="7">Employer 7</option>
</select>
<div id="employer">SHOW</div>
Vanilla javascript solution would be:
var selectElem = document.getElementById("selectEmployer");
var divElem = document.getElementById("employer");
var showFor = [1,2,7];
divElem.style = "display:none;"
selectElem.addEventListener('change', function(e) {
var selectValue = parseInt(e.target.value);
if (showFor.includes(selectValue)) {
divElem.style = "";
} else {
divElem.style = "display:none;"
}
});
<select class="custom-select" id="selectEmployer">
<option selected>Vyberte</option>
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
<option value="5">Employer 5</option>
<option value="6">Employer 6</option>
<option value="7">Employer 7</option>
</select>
<div id="employer">SHOW</div>
Here I hope this does what you need it to
https://stackblitz.com/edit/angular-dm1w3a
<select class="custom-select" id="selectEmployer" (ngModelChange)="checkChange($event)" [(ngModel)]="selectedValue">
<option selected>Vyberte</option>
<option value="1">Employer 1</option>
<option value="2">Employer 2</option>
<option value="3">Employer 3</option>
<option value="4">Employer 4</option>
<option value="5">Employer 5</option>
<option value="6">Employer 6</option>
<option value="7">Employer 7</option>
</select>
<div id="employer" *ngIf="selectedValue === '1' || selectedValue === '2' || selectedValue === '7'">SHOW</div>
Related
I know this is a simple question. But I couldn't find a way to overcome this issue. All I want is this. I have a drop-down created using select element & when user selecting a city from that drop-down it should be able to pass that selected value to console ( console.log() ). But I am able to pass very first selected value only. I found a way to pass values to console using onChange() with select element as following code.
HTML
<select id="comboA" onchange="getComboA(this)">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>
JS
function getComboA(selectObject) {
var value = selectObject.value;
console.log(value);
}
But in my case, the whole procedure needs to be code without using onChange() in HTML. Because I have to get user inputs from WordPress form and need to make separate JS file from the form. So, I can't add or change HTML code of the form. My code is below.
HTML code
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
The JS code I used is below.
JS code
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
Please help me with this issue.
const selectElement = document.querySelector('#city-selection');
const changeHandler = (ev) => {
console.log('Change!', ev.target.value);
}
selectElement.addEventListener('change', changeHandler);
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
Please take a look on this fiddle:
Fiddle
const selectCites = document.getElementById("city-selection");
selectCites.addEventListener("change", function(e) {
e.preventDefault();
const { srcElement } = e;
const { selectedOptions } = srcElement;
for (let i = 0; i < selectedOptions.length; i++) {
console.log(selectedOptions[i].value);
console.log(selectedOptions[i].text);
}
})
Basically I added a event listener on the select and wait for any changes and then I loop through the selectedOptions in a case you have more than one.
Just add the EventListener to listen for a change-event:
document.addEventListener("change", function() {
var cityVal = document.getElementById("city-selection");
var cityCon = cityVal.options[cityVal.selectedIndex].text;
console.log(cityCon);
}
You can register an external event listener to respond to the change event like this:
document.querySelector('select[name="city"]').addEventListener('change',function(e){
console.log( 'value: %s - Text: %s',this.value, this.options[ this.options.selectedIndex ].text )
});
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="City 1">City 1</option>
<option value="City 2">City 2</option>
<option value="City 3">City 3</option>
<option value="City 4">City 4</option>
<option value="City 5">City 5</option>
<option value="City 6">City 6</option>
<option value="City 7">City 7</option>
</select>
you cant use target property. like this :
const myCombo = document.getELementByID("myCombo");
myCombo.addEventListener("change" , (e) => {
console.log(e.target.value)
});
Almost all the best alternatives has been given, you can either use pure javascript or jquery
Say this is your HTML codes for Cities in Tanzania:
<select name="city" class="city" id="city-selection">
<option selected="selected" value="">Select City</option>
<option value="dar">Dar es Salaam </option>
<option value="mbeya">Mbeya</option>
<option value="mwanza">Mwanza</option>
<option value="dodoma">Dodoma</option>
<option value="arusha">Arusha</option>
<option value="morogoro">Morogoro</option>
<option value="tanga">Tanga</option>
<option value="zanzibar">Zanzibar City</option>
<option value="kigoma">Kigoma</option>
</select>
So your pure javascript can be:
document.getElementById('city-selection').addEventListener('change', function() {
let selectedCity = this.value;
console.log(selectedCity);
});
Jquery:
$('#city-selection').on('change', function() {
let selectedCity = $(this).val();
//let selectedCity = this.value; this will also do the same
//as the above declaration format
console.log(selectedCity);
});
I hope this can be of help to you
Need to disable option "5" & "6" when the option value "2" is selected. It should display all the options in the List_2 when option "1" is selected. How can I do that using jQuery or any other method.
if ($('option[value=2]').prop('selected', true)) {
$('option[value=5]').prop('disabled', true);
}
<HTML>
<body>
<select id= "List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id= "List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</body>
</HTML>
Here you go with a solution https://jsfiddle.net/eurbvzk1/
var disabledDic = {
"1" : ["6"],
"2" : ["4", "5"],
"3" : []
}
$('select#list_1').on('change', function(){
$('select#list_2 option').each(function(){
$(this).removeAttr('disabled');
});
var disableOption = disabledDic[$(this).val()];
$.each( disableOption, function(i){
$('option[value="' + disableOption[i] + '"]').prop('disabled', 'disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="list_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 2</option>
</select>
<select id= "list_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Create a dictionary that will contain each first select option as key & value will be list of disabled options from second list.
Onchange method check the dictionary & loop through the disabled value.
Hope this will help you.
With plain JS:
document.getElementById('List_1').onchange = function() {
document.getElementById('List_2')[1].disabled = (document.getElementById('List_1').selectedIndex == 1);
document.getElementById('List_2')[2].disabled = (document.getElementById('List_1').selectedIndex == 1);
}
<select id="List_1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="List_2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
Sorry about the confusing title, but basically my question is how do I use the selection from one dropdown menu to decide which dropdown menu shows up next? I want to do something like this:Select menuoption #1option #2option #3Selecting option #1 would open another select menu:sub-option #1.1sub-option #1.2sub-option #1.3and the same thing for options #2 and #3, and THEN sub-option #1.1 would open another select menu.I think I have the HTML down just fine, but I'm extremely rusty with Javascript.https://jsfiddle.net/mun52n13/Any ideas?In my code, screen replacement should trigger #devices which, when selecting iphone should trigger #iphones, selecting ipad should trigger #ipads, and etc.
HTML
<select name="service" id="service" class="service">
<option>Select a Service</option>
<option value="screen" id="screen">Screen Replacement</option>
<option value="comp" id="comp">Computer Work</option>
<option value="misc" id="misc">Miscellaneous</option>
</select>
<div id="devices">
<select name="devices" id="devices" class="devices">
<option value="iphone" id="iphone">iPhone</option>
<option value="ipad" id="ipad">iPad</option>
<option value="android" id="android">Android</option>
</select>
</div>
<div id="iphones">
<select name="iphone" id="iphone" class="iphone">
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
</div>
<div id="ipads">
<select name="ipad" id="ipad" class="ipad">
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
</div>
<div id="computerwork">
<select name="compwork" id="compwork" class="compwork">
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
</div>
<div id="miscservices">
<select name="miscellaneous" id="miscellaneous" class="miscellaneous">
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
</div>
JS
$(document).ready(function(){
$('#service').on('change', function() {
$('#devices').hide();
$('#iphones').hide();
$('#ipads').hide();
$('#computerwork').hide();
$('#miscservices').hide();
if ( this.value == 'screen')
{
$("#devices").show();
}
if ( this.value == 'iphone')
{
$("#iphones").show();
}
if ( this.value == 'ipad')
{
$("#ipads").show();
}
if ( this.value == 'comp')
{
$("#computerwork").show();
}
if ( this.value == 'misc')
{
$("#miscservices").show();
}
if ( this.value == 'comp')
{
$("#computerwork").show();
}
if ( this.value == 'miscservices')
{
$("#miscservices").show();
}
});
});
That is a short prototype on how to make your thing work :
check the js fiddle:
https://jsfiddle.net/yehiaawad/mun52n13/6/
When you select devices from services select
=> services-devices would display
=> when selecting Iphone from devices select
=>devices-iphones should be displayed and the rest would be hidden
(the same thing with IPad)
HTML:
<select name="service" id="service" class="service">
<option>Select a Service</option>
<option value="screen" data-target="devices" id="screen">Screen Replacement</option>
<option value="comp" data-target="comp" id="comp">Computer Work</option>
<option value="misc" data-target="misc" id="misc">Miscellaneous</option>
</select>
<div style="display:none" id="service-devices">
<select name="devices" id="devices" class="devices">
<option>Select a device</option>
<option value="iphone" data-target="iphones" id="iphone">iPhone</option>
<option value="ipad" data-target="ipads" id="ipad">iPad</option>
<option value="android" id="android">Android</option>
</select>
<div style="display:none" id="devices-iphones">
<select name="iphone" id="iphone" class="iphone">
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option></option>
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
</div>
<div style="display:none" id="devices-ipads">
<select name="ipad" id="ipad" class="ipad">
<option></option>
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
</div>
</div>
<div style="display:none" id="service-comp">
<select name="compwork" id="compwork" class="compwork">
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
</div>
<div style="display:none" id="service-misc">
<select name="miscellaneous" id="miscellaneous" class="miscellaneous">
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
</div>
Javascript:
$(document).ready(function(){
$('select').on('change', function() {
var target=$(this).find(":selected").attr("data-target");
var id=$(this).attr("id");
$("div[id^='"+id+"']").hide();
$("#"+id+"-"+target).show();
});
});
This is a way to do it: https://jsfiddle.net/mun52n13/7/
I created a menu class, a attribute data-parent to set the parent menu, and a attribute data-target to set the value associated with this menu.
So you can look for which menu should be shown or hidden.
CSS:
.menu {
display: block;
}
.menu.hidden {
display: none;
}
HTML:
<select name="service" id="service" class="service menu">
<option>Select a Service</option>
<option value="screen" id="screen">Screen Replacement</option>
<option value="comp" id="comp">Computer Work</option>
<option value="misc" id="misc">Miscellaneous</option>
</select>
<select name="devices" id="devices" class="devices menu hidden" data-parent="#service" data-target="screen">
<option></option>
<option value="iphone" id="iphone">iPhone</option>
<option value="ipad" id="ipad">iPad</option>
<option value="android" id="android">Android</option>
</select>
<select name="iphone" id="iphone" class="iphone menu hidden" data-parent="#devices" data-target="iphone">
<option></option>
<!--<option value="iphone6s" id="iphone6s">iPhone 6S</option> -->
<!--<option value="iphone6splus" id="iphone6splus">iPhone 6S Plus</option>-->
<option value="iphone6" id="iphone6">iPhone 6</option>
<option value="iphone6plus" id="iphone6plus">iPhone 6 Plus</option>
<option value="iphone5s" id="iphone5s">iPhone 5S</option>
<option value="iphone5c" id="iphone5c">iPhone 5C</option>
<option value="iphone5" id="iphone5">iPhone 5</option>
<option value="iphone4s" id="iphone4s">iPhone 4S</option>
<option value="iphone4" id="iphone4">iPhone 4</option>
</select>
<select name="ipad" id="ipad" class="ipad menu hidden" data-parent="#devices" data-target="ipad">
<option></option>
<option value="ipadmini3" id="ipadmini3">iPad Mini 3</option>
<option value="ipadmini2" id="ipadmini2">iPad Mini 2</option>
<option value="ipadair" id="ipadair">iPad Air</option>
<option value="ipad4" id="ipad4">iPad 4</option>
<option value="ipad3" id="ipad3">iPad 3</option>
<option value="ipadmini" id="ipadmini">iPad Mini</option>
<option value="ipad2" id="ipad2">iPad 2</option>
</select>
<select name="compwork" id="compwork" class="compwork menu hidden" data-parent="#service" data-target="comp">
<option></option>
<option value="desktopcreation" id="desktopcreation">Desktop Creation</option>
<option value="desktopbuild" id="desktopbuild">Desktop Build</option>
<option value="hardwareupgrades" id="hardwareupgrades">Hardware Upgrades</option>
<option value="datarecovery" id="datarecovery">Data Recovery/Transfer</option>
<option value="spywareremoval" id="spywareremoval">Spyware/Adware Removal</option>
<option value="virusremoval" id="virusremoval">Virus Removal</option>
</select>
<select name="miscellaneous" id="miscellaneous" class="miscellaneous menu hidden" data-parent="#service" data-target="misc">
<option></option>
<option value="networksecurity" id="networksecurity">Network Security</option>
<!--<option value="webdesign" id="webdesign">Website Design</option>-->
</select>
JAVASCRIPT:
$(document).ready(function() {
$('.menu').change(function() {
var id = this.id;
var value = this.value;
if ($(this).css('display') == 'none') {
$('.menu[data-parent="#' + id + '"]').css('display', 'none').change();
} else {
$('.menu[data-parent="#' + id + '"]:not([data-target="' + value + '"])').css('display', 'none').change();
$('.menu[data-parent="#' + id + '"][data-target="' + value + '"]').css('display', 'block').change();
}
});
});
My html code:
<select class="sss" size="3">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<select>
and jquery code:
var $s = $('.sss');
var optionTop = $s.find('[value="3"]').offset().top;
var selectTop = $s.offset().top;
$s.scrollTop($s.scrollTop() + (optionTop - selectTop));
it is possible for me in jquery . (DEMO)
but I want to solve that in javascript. Is it possible?
I have solved that: following ans:
var s = document.getElementById("aa");
var optionTop = s.querySelector('option[value="2"]').offsetTop;
var selectTop = s.offsetTop;
s.scrollTop = s.scrollTop + (optionTop - selectTop);
<select id="aa" size="3">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="5">value 5</option>
<option value="6">value 6</option>
<select>
I am surrently having an issue using JQuery. I have 2 select fields.
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>
And here is my JavaScript code
<script type="text/javascript">
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_"+curval).show(0);
$("#cat").change(function(){
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if($(".cat_"+cat).length == 0){$(".cat_0").show(0);}
else{$(".cat_"+cat).show(0);}
});
</script>
Here is the problem. When I change the value of the cats select, the options for the subcats are changed correctly. However, the currently selected field is still showing (Even if it doesn't correspond to the current cat).
Any help would be greatly appreciated.
You should change your code a little bit so on the hange event it can add the selected attribute to the first element in the available options :)
var curval = $("#cat").val();
$(".subcats").hide(0);
$(".cat_" + curval).show(0);
$("#cat").change(function() {
var cat = $(this).val();
$(".subcats").removeAttr("selected").hide(0);
if ($(".cat_" + cat).length == 0) {
$(".cat_0").attr("selected", "selected").show(0);
} else {
$(".cat_" + cat).eq(0).attr("selected", "selected");
$(".cat_" + cat).show(0);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="cat" name="cat_id">
<option value="2">Cat 2</option>
<option value="3">Cat 3</option>
<option value="4">Cat 4</option>
</select>
<select id="subcat" name="subcat_id">
<option class="subcats cat_2" value="1">Subcat 1</option>
<option class="subcats cat_2" value="2">Subcat 2</option>
<option class="subcats cat_3" value="3">Subcat 3</option>
<option class="subcats cat_3" value="4">Subcat 4</option>
<option class="subcats cat_3" value="5">Subcat 5</option>
<option class="subcats cat_0" value="0">No subcats for this cat</option>
</select>