This is showing all divs if I select councils but when I change to property it only shows the first, but I want to display all divs which contain property ID. I want to display all results which are related to the selection from dropdown menu.
<html>
<head>
<title>Drop Down Example</title>
<script type="text/javascript" src="../js/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
function showTab ( name ) {
name = '#' + name;
$('div').not(name).hide();
$(name).show();
}
$('#dropdown').change(function () {
showTab( $( this ).val() );
});
showTab( $('#dropdown').val() );
}); // this line was missing
</script>
</head>
<body>
<form>
<p>
<select id="dropdown" name="dropdown">
<option value="" selected="selected">All </option>
<option value="Pubs">Pubs </option>
<option value="Councils">Councils </option>
<option value="Property">Property </option>
<option value="Various">Various </option>
<option value="Universitys">Universitys </option>
</select>
</p>
</form>
<div id="Pubs">pubs</div>
<div id="Councils">councils 1</div>
<div id="Property">property 1</div>
<div id="Various">various</div>
<div id="Councils">councils 2</div>
<div id="Universitys">universitys</div>
<div id="Property">property 2</div>
<div id="Property">property 3</div>
</body>
</html>
I want to display results like this:
If I select Councils then Results will show
Councils 1<br>
Councils 2
If I select Property the result will show
Property 1<br>
Property 2<br>
Property 3
If I select Pubs the result will show
Pubs
Related
I'm struggling to get the value of the selected item in a dropdown
$('.submitbutton').on('click', function() {
var valueofitem = $(this).parent().children('.names :selected').attr('value');
console.log(valueofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thingselect">
<select name="names1" class="names">
<option value="1">Car</option>
<option value="2">Bike</option>
<option value="3">Train</option>
</select>
<div class="submitbutton">
<button>
Send
</button>
</div>
</div>
When I select one of the options and click Send, value the is printed to the console is 'undefined' and I can't seem to figure out why.
Thanks for your help!
You can get the value of the selected option by using .val() on the select element (so there is no need to target the selected option) like so:
$('.submitbutton').on('click', function() {
var valueofitem = $(this).parent().children('.names').val();
console.log(valueofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thingselect">
<select name="names1" class="names">
<option value="1">Car</option>
<option value="2">Bike</option>
<option value="3">Train</option>
</select>
<div class="submitbutton">
<button>Send</button>
</div>
</div>
Or simply get the .val() of the .names class:
$('.submitbutton').on('click', function() {
var valueofitem = $('.names').val();
console.log(valueofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thingselect">
<select name="names1" class="names">
<option value="1">Car</option>
<option value="2">Bike</option>
<option value="3">Train</option>
</select>
<div class="submitbutton">
<button>Send</button>
</div>
</div>
Change .children to .find.
When you use .children(), it's looking for a child that matches the .names :selected selector, but the child is just .names, :selected matches a granchild.
.find() searches further down.
$('.submitbutton').on('click', function() {
var valueofitem = $(this).parent().find('.names :selected').attr('value');
console.log(valueofitem);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="thingselect">
<select name="names1" class="names">
<option value="1">Car</option>
<option value="2">Bike</option>
<option value="3">Train</option>
</select>
<div class="submitbutton">
<button>
Send
</button>
</div>
</div>
I have a categories dropdown and multiple divs with class names, i want when the user selects and option from the dropdown to filter the divs according to the chosen option, like for example i have a category called makeup when the user selects it i want to only show the divs with the class makeup, here is what i have tried:
$('#categories').change(function() {
var val = $(this).val();
if (val == "makeup") {
$('.makeup').fadeIn();
} else {
$(".makeup").not('.' + value).fadeOut();
$('.makeup').filter('.' + value).fadeIn();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="makeup">
Div 1
</div>
<div class="makeup">
Div 2
</div>
<div class="makeup">
Div 3
</div>
<div class="other">
Div 4
</div>
Put a common class "category" on all the divs.
Bind the change handler to the select
When it changes, fadeOut all the options, and fadeIn the ones that match the value as a class
$('#categories').on('change', function(e) {
$('.category')
.fadeOut()
.filter('.'+ e.target.value)
.fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="category makeup">
Div 1
</div>
<div class="category makeup">
Div 2
</div>
<div class="category makeup">
Div 3
</div>
<div class="category other">
Div 4
</div>
This code works as requested, I've just added the class .category-option to the elements you are fading in and out.
Demo
$('#categories').change(function() {
// Get value of selected option
var val = $(this).children("option:selected").val();
// Fadeout all that are not linked
$(".category-option").fadeOut();
// Fade in appropriate options
$(".category-option." + val).fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="category-option makeup">
Div 1
</div>
<div class="category-option makeup">
Div 2
</div>
<div class="category-option makeup">
Div 3
</div>
<div class="category-option other">
Div 4
</div>
I'm trying to load page content into a div via Ajax when a select option is selected.
This is my code, but it will not work.
$('mySelect').on('change',function(){
function loadPage(url){
$("#page").load(url);
}
});
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" onchange="loadPage('One.html')">One</option>
<option value="2" onchange="loadPage('Two.html')">Two</option>
</select>
</div>
<div id="page"></div>
</body>
</html>
I have a select box with 2 options the values are One.html and Two.html and under that I have a div and want the content from One.html and Two.html to load in the div when the select box changes... Via Ajax any suggestions?
Thanks
You're missing the id sign # :
$('mySelect').on('change',function(){
Should be :
$('#mySelect').on('change',function(){
___^
Try to avoid the inline event onchange() and use data-* to store the url param then pass it to the loadPage function inside the change event.
$(function() {
loadPage("One.html");
$('#mySelect').on('change', function() {
loadPage($(this).find(':selected').data('url'));
//OR
// $("#page").load( $(this).find(':selected').data('url') );
});
});
function loadPage(url) {
$("#page").load(url);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<select class="custom-select" id="mySelect">
<option value="1" data-url="One.html">One</option>
<option value="2" data-url="Two.html">Two</option>
</select>
</div>
<div id="page"></div>
it's quite simple:
$("#SelectOne").change(function() {
$("#someDiv").load($(this).val());
});
<select id="SelectOne">
<option>One.html</option>
<option>Two.html</option>
</select>
<div id="someDiv"></div>
Is it possible to hide a option in select with div, and then use style.display = "none"
Html code I have used:
<div class="test">
<div class="optioncheck" id="text place">
<select id="status" onChange="myFunction()">
<option value="1">Texts</option>
<div class="options" id="text"><option value="2">Text</option></div>
<div class="options" id="text1"><option value="3">Text1</option></div>
</select>
</div>
<div class="optioncheck" id="map" style="display:none;">
Text
<div class="optioncheck" id="map1" style="display:none;">
Text
</div>
</div>
</div>
Javascript I try to use to hide the options if variable is false
var readtext = false;
if (readtext == true) {
document.getElementById('text').style.display = "block";
} else {
document.getElementById('text').style.display = "none";
}
You can't directly. Instead, you have to use (or write) javascript library which will demonstrate divs for select options. Just like Select2 jQuery library does.
You can't use display:none for hiding options in select, if you want to hide option you can use something like
$( "#status option[value=1]" ).wrap( "<span>" );
and to again show the particular option use
if ( $( "#status option[value=2]" ).parent().is( "span" ) ){
$( "#status option[value=2]" ).unwrap();
}
This should do the work for you.
Remove divs, use just options.
Here your code without divs.
http://codepen.io/anon/pen/ryOeWo
<div class="test">
<div class="optioncheck" id="text place">
<select id="status" onChange="myFunction()">
<option value="1">Texts </option>
<option id="text" value="2">Text</option>
<option value="3">Text1</option>
</select>
</div>
<div class="optioncheck" id="map" style="display:none;">
Text
<div class="optioncheck" id="map1" style="display:none;">
Text
</div>
</div>
If you just wish to hide some options other than the first option.You can do that via simple javascript.
Refer to this fiddle:
https://jsfiddle.net/ysd8w8sk/
Let's say we have following html:
<select id="fruits_dropdown">
<option value='1' > Apple </option>
<option value ='2'> Banana </option>
<option value ='3'> Orange </option>
<option value ='4'> Cherry </option>
</select>
Then we can hide option 2 and 3 like this :
document.querySelector('#fruits_dropdown option[ value="2"]').style.display='None';
document.querySelector('#fruits_dropdown option[ value="3"]').style.display='None';
i have created dynamic drop down
loading second drop down using first selected value
now what i need is i need to display the following css(tic icon) next to first drop down
code
<span id="checkmark">
<div id="circle"></div>
<div id="stem"></div>
<div id="kick"></div>
</span>
the CSS is added in JSfiddleand full Jsfiddle
i need like this when second drop down is loaded i need output like this
You can make it like this http://jsfiddle.net/4yL0871f/2/
The CODE
$(function () {
$("#text-one").change(function () {
$("#checkmark").css({display: 'inline-block'});
$("#text-two").show();
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
});
HTML
<div id="page-wrap">
<h1>Pulls from text files</h1>
<div class="select-wrap">
<select id="text-one">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<span id="checkmark">
<div id="circle"></div>
<div id="stem"></div>
<div id="kick"></div>
</span>
</div>
<select id="text-two" style="display :none">
<option>Please choose from above</option>
</select>
</div>