what I'm trying to do is to create two select fields and after selecting some option in the first one, some of options in the second should be hidden.
I'm almost there, except the fact, that my script can't find certain option out of the first select field, but when I put such option in the first it works, but only with the first one, so it's useless. I need it to hide options in the second select field according to option chosen in the first one.
What makes it all more difficult is the fact that I can't add any classes or ids or anything actually here.
I think I've made some mistake that consists of the way I tell the script which element should it edit, but I have no idea how to write it another way.
HTML
<select name="NameOne">
<option value="First">Lorem Ipsum1</option>
<option value="Second">Lorem Ipsum2</option>
<option value="Third">Lorem Ipsum3</option>
<option value="CD">Dolor2</option>
</select>
<select name="NameTwo">
<option value="AB">Dolor1</option>
<option value="CD">Dolor2</option>
<option value="EF">Dolor3</option>
</select>
JS
$("select").change(function(){
if($(this).val() == "Second") {
$('option[value="CD"]', this).addClass('hidden');
} else {
$('option[value="CD"]', this).removeClass('hidden');
}
});
CSS
.hidden {
display: none
}
Please, help.
It is not working because of this code here:
$('option[value="CD"]', this)...
In simple words, this checks for the option on select which is currently clicked. Since you clicked the first select, this becomes the first select and it tries to find option with values CD on it which is not present. So what you do?? Simple, get the second select, find option with values CD in it and change the class :)
Try this
// you can change this to select first select only since selecting all the select doesnot make sense.
$("select").change(function(){
//$("select[name='NameOne']").change(function(){ <--- better
var secondSelect = $("select[name='NameTwo']"); //get second select
if($(this).val() == "Second") {
secondSelect.find('option[value="CD"]').addClass('hidden'); //find option with CD and add Class
} else {
secondSelect.find('option[value="CD"]').removeClass('hidden');
}
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="NameOne">
<option value="First">Lorem Ipsum1</option>
<option value="Second">Lorem Ipsum2</option>
<option value="Third">Lorem Ipsum3</option>
<option value="CD">Dolor2</option>
</select>
<select name="NameTwo">
<option value="AB">Dolor1</option>
<option value="CD">Dolor2</option>
<option value="EF">Dolor3</option>
</select>
$("select").change(function(){
var secondSelect = $(select["name='NameTwo']");
if($(this).val() == "Second") {
secondSelect.find('option[value="CD"]').addClass('hidden');
} else {
secondSelect.find('option[value="CD"]').removeClass('hidden');
}
});
You should query on a specific select and then hide the option in the other select, without this which would only do those options in the select that changed.
$("select[name='NameOne']").change(function() {
if ($(this).val() == "Second") {
$("select[name='NameTwo'] option[value='CD']").addClass('hidden');
} else {
$("select[name='NameTwo'] option[value='CD']").removeClass('hidden');
}
});
.hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="NameOne">
<option value="First">Lorem Ipsum1</option>
<option value="Second">Lorem Ipsum2</option>
<option value="Third">Lorem Ipsum3</option>
<option value="CD">Dolor2</option>
</select>
<select name="NameTwo">
<option value="AB">Dolor1</option>
<option value="CD">Dolor2</option>
<option value="EF">Dolor3</option>
</select>
Related
When selecting another country, the list becomes visible. It works, however there's one issue. When selecting another county the very first item of its attached region must be displayed, instead of remained value.
I.e. when selecting Germany, New York must become invisible, and Dresden must become visible. I've been trying to do this for several hours with no luck. Any advice?
$(function() {
$("[name='country']").change(function() {
// Target option
var hiddenClass = 'hidden';
var selected = $(this).find(':selected').data('country-id');
// Hide all options
$("[name='region']").find('option') // Find all options
.addClass(hiddenClass) // Hide them all
.each(function() {
// Find current active
if ($(this).data('country-id') == selected) {
// Show currently matched against selection
$(this).removeClass(hiddenClass);
}
});
}).trigger('change');
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
</script>
<select name="country">
<option data-country-id="1">USA</option>
<option data-country-id="2">Germany</option>
</select>
<select name="region">
<option data-country-id="1">New York</option>
<option data-country-id="1">California</option>
<option data-country-id="1">Carolina</option>
<option data-country-id="2">Dresden</option>
<option data-country-id="2">Berlin</option>
</select>
The issue is because, although some of the option elements are hidden, they're still technically available in the DOM to be selected. To fix this you can force the selection to update to the first available option based on the given country-id value.
Also note that you can make your logic more succinct by using filter() instead of an each() loop. Try this:
$(function() {
$("[name='country']").change(function() {
var hiddenClass = 'hidden';
var selected = $(this).find(':selected').data('country-id');
$('[name="region"] option').addClass(hiddenClass)
.filter(`[data-country-id="${selected}"]`).removeClass(hiddenClass)
.first().prop('selected', true);
}).trigger('change');
});
.hidden { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<select name="country">
<option data-country-id="1">USA</option>
<option data-country-id="2" selected="true">Germany</option>
</select>
<select name="region">
<option data-country-id="1">New York</option>
<option data-country-id="1">California</option>
<option data-country-id="1">Carolina</option>
<option data-country-id="2">Dresden</option>
<option data-country-id="2">Berlin</option>
</select>
I have the following form:
var x = document.getElementById("submit-button");
if (x.selectedIndex.value == null) {
$("#submit-button").css("display","none");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option disabled selected>Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
If the selected index of the dropdown is the disabled placeholder option with no value, i want to hide the submit button. As soon as a colour is selected i want to show the button again.
Any help will be appreciated.
You are in the right way. But missing some points with events:
1 - The whole code must be executed when DOM is ready (document loaded)
2 - You must observe the select change event to check for changes
3 - You can use jQuery .hide() and .show() do control the element's visibility
// Executed when DOM is loaded
$(document).ready(function() {
// Executed when select is changed
$("select").on('change',function() {
var x = this.selectedIndex;
if (x == "") {
$("#submit-button").hide();
} else {
$("#submit-button").show();
}
});
// It must not be visible at first time
$("#submit-button").css("display","none");
});
Look this working fiddle
The shortest way would be
$(function(){
$("select").on("change", function(){
$("#submit-button").toggle(!!this.value);
}).change();
});
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
You need to create an event handler for when the dropdown changes. In the example below I've hidden the submit button by default, and when the dropdown changes I toggle the visibility of the button based on if there is a selected value in the dropdown.
I allowed your "Select colour" option to be available just to better demonstrate how the event handler works.
$("#submit-button").hide();
$("select").on("change", function() {
if (this.value)
$("#submit-button").show();
else
$("#submit-button").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select>
<option selected value="">Select colour</option>
<option value="Orange">Orange</option>
<option value="Apple">Apple</option>
<option value="Lemon">Lemon</option>
</select>
<button id="submit-button" type="submit">Click</button>
</form>
You should add a listener to your select like this:
$('form select').on('change', function(){
if($(this).val() == null){
$("#submit-button").hide();
}else{
$("#submit-button").show();
}
}).change();
It will check every time that changes the option, hiding the button when the option has no value and showing it when it does. Also, it will trigger that at first to hide for the initial case.
Hi there Kindly try the following solution and tell me if you wanted something like this :
$(document).ready(function(){
if($('select').val() == null){
$('#submit-button').css('display','none');
}
$('select').on('change', function() {
$('#submit-button').css('display','block');
});
I have two select lists and the second one depends on the first. I would like to allow the second select list to load and then fire some alerts after that. What is the best way to achieve this using jQuery?
For eg: The second list gets populated in the following manner below:
1 - a,b,c
2 - b,c,d
3 - a,c,d
4 - a,b
Meaning that if someone selects 1 in the first picklist, the second one is loaded with options a,b,c.
$("#first").change(function() { // bind a change event:
refreshsecond(document.theForm);
}).change(); // and trigger a "change" event immediately
function refreshsecond(form)
{
var length = $('#second').children('option').length;
alert("Length is :" + length);
}
<select id="first" name="firstName">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<select id="second" name="secondName">
<option value='a'>a</option>
<option value='b'>b</option>
<option value='c'>c</option>
<option value='d'>d</option>
</select>
Other than having #second load elements in a certain way a better idea is to just add and replace to the elements HTML. Meaning that we start with #second being empty and change the <option> items based on the first select box's value. For example:
$("#first").change(function() {
if($(this).val() == 1)
$("#second").html(loadValues(['a','b','c']));
else if($(this).val() == 2)
$("#second").html(loadValues(['b','c','d']));
else if($(this).val() == 3)
$("#second").html(loadValues(['a','c','d']));
else if($(this).val() == 4)
$("#second").html(loadValues(['a','b']));
var length = $('#second').children('option').length;
alert("Length is :" + length);
}).change();
function loadValues(ArrValues){
var string = "";
for(var i = 0; i < ArrValues.length; i++)
string += "<option value='"+ArrValues[i]+"'>"+ArrValues[i]+"</option>";
return string;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" name="firstName">
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>
<select id="second" name="secondName">
</select>
If it's dependent on the user selecting one in the first dropdown, you simply need to attach an onChange handler to the first dropdown list.
For example
$('#first').change(function() {
//do your stuff here to second dropdown list.
});
Take a look at http://api.jquery.com/change/ for more details.
Let's say you have a form:
<form>
<select name="cars">
<option value="all">All Cars</option>
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
<select name="volvo_dealers">
<option value="dealer1">Volvo Dealer 1</option>
<option value="dealer2">Volvo Dealer 2</option>
</select>
<select name="audi_dealers">
<option value="dealer1">Audi Dealer 1</option>
<option value="dealer2">Audi Dealer 2</option>
</select>
<input type="submit" value="Submit">
</form>
However, you only want to display one of the two "dealers" select-options after you have chosen on of Volvo or Audi. The one that will be displayed is of course depending on which of Volvo and Audi was selected in the "cars" select-options.
What might be a good approach for this small issue?
Rergards,
Bill
There's a way of doing this without adding more than one id (and no classes) that would also allow you to add more dealers if you needed. First you need to hide the dealers select dropdowns with css.
Then add an id of 'cars' to the cars select:
<select name="cars" id="cars">
<option value="all">All Cars</option>
<option value="volvo">Volvo</option>
<option value="audi">Audi</option>
</select>
Then use jQuery to do the rest:
$('#cars option').click(function(){
var car = $(this).attr('value');
$('select.' + car + '_dealers').show();
});
Some answers already gave you the script to do what you wanted with the form. But here's my version of the script for your markup.
Check an example here
http://jsbin.com/omuboq/1/edit
$(document).ready(function(){
$('form').change(function(){
var selectOp = $("form select[name='cars']").val();
switch(selectOp) {
case 'volvo' :
$("form select[name='audi_dealers']").hide();
$("form select[name='volvo_dealers']").show();
break;
case 'audi':
$("form select[name='volvo_dealers']").hide();
$("form select[name='audi_dealers']").show();
break;
case 'all' :
$("form select[name='audi_dealers']").show();
$("form select[name='audi_dealers']").show();
break;
}
});
});
The script is bigger than that of others but works well. This script runs on a basic principle. It first checks the value of the cars dropdown menu and displays or hide the other dropdown menu according to the selected option.
Most naturally would be to show only corresponding dealers at a time and hide others:
$('.cars').change(function() {
$('.dialers').hide().filter('[name="' + $(this).val() + '_dealers"]').show();
});
http://jsfiddle.net/BncsJ/
So if I select Audi I want to see only Audi dealers, I don't need others.
Given your markup you can do
$(function(){
$("select[name=cars]").change(function(){
if ($(this).val() == "volvo") {
$("select[name=volvo_dealers]").show();
$("select[name=audi_dealers]").hide();
} else if (($(this).val() == "audi")) {
$("select[name=audi_dealers]").show();
$("select[name=volvo_dealers]").hide();
} else {
$("select[name=volvo_dealers]").hide();
$("select[name=audi_dealers]").hide();
}
});
$("select[name=cars]").trigger("change");
});
Here is jsFiddle
I have a drop down similar to this:
<select>
<option value=" " id="invisible" style="display:none;"></option>
<option value="0">one</option>
<option value="1">two</option>
<option value="2">three</option>
<option value="">clear</option>
</select>
When I press 'clear' option, the drop down list should show nothing (even 'clear') but not delete any options inside i.e. nothing should show on the dropdown list until it is clicked.
Please advise.
just have an id for select and set value for option clear as 'clear'...
<option value='clear'>clear</option>
<select id="select">
then try this...
if($('#select').val() == 'clear'){
$('#select).val('');
}
For javascript...
var value = document.getElementById('select');
if(value == 'clear'){
document.getElementById('select').value = '';
}
might work...