I want to know how to show one element after I select option from one select and then select option from another select. If I have 2 selected options the div need to show, else to hide. I tried this, but it is not working. How can I do it with change function or something else ? Thanks.
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
jQuery('.box').show();
} else {
jQuery('.box').hide();
}
You need to wrap your code in a "change" event listener.
There are several ways of doing it, but this should work fine.
$('select.one').change(function() {
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
Try this
$(document).on("change","select.one,select.two",function(){
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
jQuery('.box').show();
} else {
jQuery('.box').hide();
}
});
Here you go with a solution https://jsfiddle.net/axaryfb2/
$('select').change(function(){
if (($('select.one option').is(':selected') && $('select.one option:selected').val() != "") && ($('select.two option').is(':selected') && $('select.two option:selected').val() != "")) {
$('.box').show();
} else {
$('.box').hide();
}
});
.box{
width: 100px;
height:100px;
background: blue;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="one">
<option value="">Select Option</option>
<option value="test1">test 1</option>
<option value="test2">test 2</option>
</select>
<select class="two">
<option value="">Select Option</option>
<option value="testA">test A</option>
<option value="testB">test B</option>
</select>
<div class="box">
</div>
JS
$('select').change(function(){
if ($('select.one option').is(':selected') && $('select.two option').is(':selected')) {
$('.box').show();
} else {
$('.box').hide();
}
});
Hope this will help you.
Try this
Ive included a listener on all select elements on the page that have the class demoSelect.
You dont want to add a listener to all select elements on your page as you may have other select elements that dont require the same logic. Wrapping them in a class and then selecting on the class instead allows for this.
//use the on() method to attach event handlers, this replaces the live(), delegate() and bind() methods from previous JQuery versions
$(".demoSelect").on("change", function()
{
//if values for both dropdowns are set to "1"
if( $("#one").val() == "1" && $("#two").val() == "1")
{
//show the div
$(".box").show();
}
else
{
//hide the div
$(".box").hide();
}
});
.container
{
border: 1px solid black;
height: 70px;
}
.padding
{
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- example of select options that are affected by the above javascript !-->
<div class="container">
<div class="padding">
<span>
This select group uses the script because of the '.demoSelect' class
</span><br/>
<select id="one" class="demoSelect">
<option> Please Select </option>
<option> 1 </option>
<option> 2 </option>
</select>
<select id="two" class="demoSelect">
<option> Please Select </option>
<option> 1 </option>
<option> 2 </option>
</select>
</div>
<div class="box padding" hidden>test</div>
</div><br/>
<!-- example of select options that arent affected by the above javascript !-->
<div class="container">
<div class="padding">
<span>
This select group is unaffected by the script
</span><br/>
<select id="separateSelectOptionOne">
<option> Please Select </option>
<option> 1 </option>
<option> 2 </option>
</select>
<select id="separateSelectOptionTwo">
<option> Please Select </option>
<option> 1 </option>
<option> 2 </option>
</select>
</div>
</div>
More info on the on() method here
Related
I have an html option select with two options:
<select name="subject" id="subject">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
I also have a div element with id="human-genome".
<div id="human-genome"></div>
I want to hide this id by default and when option 1 is selected. I want to show this id when option 2 is selected.
Here is my Jquery:
$(document).ready(function(){
$("#subject").change(function(){
if($(this.val() == 'option1'){
$('#human-genome').hide();
} else {
$('#human-genome').show();
});
});
For some reason, the code isn't working. Any suggestions?
Thank you in advance!
There is a syntax error in the code you developed. I edited the code as follows to make it understandable.
$(document).ready(function(){
$("#subject").change(function(){
console.log(this.value);
if(this.value == 'option1')
{
$('#human-genome').hide();
}
else
{
$('#human-genome').show();
}
});
});
#human-genome{
margin-left: 100px;
background-color: red;
width: 100px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="subject" id="subject">
<option value="option1">Hide</option>
<option value="option2">Show</option>
</select>
<div id="human-genome">TEST</div>
Try use $(this).val() instead of your code please.
$(document).ready(function(){
$("#subject").change(function(){
if($(this).val() == 'option1'){
$('#human-genome').hide();
} else {
$('#human-genome').show();
}});});
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>
How can i hide and show a div when click on the basis of text box. i want to show these type of result,the cursor pointer is inside the textbox the div will shown otherwise the focus is out the div will be hidden and if any value is inside a textbox the div will shown if the value is cleared the div will be hidden .these are the code
<div class="banner_search_inner_box_search">
<input type="text" name="search" class="search" id="searchid" onkeyup="getshows();" value="" placeholder="Enter a City,Locality" autocomplete="off">
<div id="result"></div>
</div>
<div id="drope_box" style="display:none;">
<div class="banner_search_type">
<select id="property_type" name="property_type">
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Plot">Plot</option>
</select>
</div>
<div class="banner_search_price_min">
<select name="price_min" class="search_list" id="price_min">
<option value="">Price Min</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
<div class="banner_search_price_max">
<select name="price_max" id="price_max">
<option value="">Price Max</option>
<option value="100000">1 lac</option>
<option value="1000000">10 lacs</option>
</select>
</div>
</div>
here is my js code
<script type="text/javascript">
function getshows()
{
if(document.getElementById("searchid").value != "")
{
document.getElementById("drope_box").style.display="block";
}
else
{
document.getElementById("drope_box").style.display="none";
}
}
</script>
<script type="text/javascript">
$('#searchid').blur(function() {
$("#drope_box").hide()
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
</script>
somebody please help me
Here: http://jsfiddle.net/Kq9pX/
JS
Do it on load: Wrap around document.ready function.
$('#searchid').blur(function() {
if($(this).val() != ""){
$("#drope_box").show();
}
else{
$("#drope_box").hide();
}
});
$('#searchid').focus(function() {
$("#drope_box").show();
});
It's generally advised to attach events using jQuery's on rather than blur(), focus(), click() etc in newer versions of jQuery, although I admit in this case there is no difference (read more here Why use jQuery on() instead of click()). But caching jQuery objects by storing them in a variable, like below, is slightly faster.
var $search = $('#searchid');
var $dropBox = $('#drope_box');
$search.on('blur', function () {
$dropBox[($.trim($search.val()).length > 0 ? 'show' : 'hide')]();
}).on('focus', function () {
$dropBox.show();
});
There's no problem with show and hide other than when it's showed the div hides if you try to select the options, to turn this around we can use focusout on the drope_box div:
$(document).ready(function(){
$('#drope_box').focusout(function() {
//check if the text input and selects have values selected
if($("#searchid").val() == "" &&
$("#property_type").val() == "" &&
$("#price_min").val() == "" &&
$("#price_max").val() == "" )
$("#drope_box").hide() //if not, hides
});
$('#searchid').focus(function() {
$("#drope_box").show()
});
});
Of course, for it to work the:
<option value="All">All</option>
Must be cleared:
<option value="">All</option>
FIDDLE: http://jsfiddle.net/e672Y/1/
Use jQuery:
$("#textbox").mouseenter(function(){
$("#div").show();
});
$("#textbox").mouseleave(function(){
$("#div").hide();
});
This so far will show the div whilst it is hovered, mouseenter checks if the textbox is moused over, mouseleave checks if it is not.
Here's my code:
<html>
<head>
<script>
function changeDate(option) {
var selectList = document.getElementById("catProdAttributeItem");
if (option == 0) {
selectList.selectedIndex++;
} else if (option == 1 && selectList.selectedIndex > 0) {
selectList.selectedIndex--;
}
}
</script>
</head>
<body>
<img src="img1.jpg" onclick="changeDate(0)">
<img src="img2.jpg" onclick="changeDate(1)">
<select id="pa_colour" name="attribute_pa_colour">
<option value="">Choose an option…</option>
<option value="black" class="active">Black</option>
<option value="blue" class="active">Blue</option>
<option value="red" class="active">Red</option>
<option value="white" class="active">White</option>
</select>
<div id="catProdAttributeItem">
<select>
<option id="1">One</option>
<option id="2">Two</option>
<option id="3">three</option>
<option id="4">Four</option>
</select>
</div>
</body>
</html>
In this code what I want to do is when the user clicks an image, the select option value will change.
If the <select id="list"> select has an id it will work fine, but in my case, the select option has no id, but before the select there is a class "catProdAttributeItem".
How do I make it work with document.getElementById and select option?
Select element is the child of Div, so you need to access the child element. For that,use following :
var selectList = document.getElementById("catProdAttributeItem").children[0];
Here is the working demo : http://jsfiddle.net/spdX3/
Since the select element is within the catProdAttributeItem div, you can select it using the childNodes property
var selectList = document.getElementById("catProdAttributeItem").childNodes[0];
Rest of the code should work as it is.
i have a question regarding Jquery
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"> disabled till you make a choice</div>
while the select menu have the choice Select box i need the div to be shown as a small black screen with the disabled message
once the user change the select menu and choose another option the value div shown the selected option for example Box 1 or Box 2
$(document).ready(function() {
// event triggered when options changed
$('#thechoices').change(function() {
// check if first option or other is selected
if ($(this).val() == 0) {
$('#value').addClass('disabled');
$('#value').html($('#value').data('default'));
} else {
$('#value').removeClass('disabled');
$('#value').html($(this).val());
}
});
});
Check out the fiddle: http://jsfiddle.net/gwKfP/1/
Here is a working Example: http://jsfiddle.net/sHqFX/
<select id="thechoices">
<option value="0">Select Box</option>
<option value="box1">Box 1</option>
<option value="box2">Box 2</option>
<option value="box3">Box 3</option>
</select>
<!-- the DIV -->
<div id="value"></div>
Put this between head tags
<script type="text/javascript">
$(document).ready(function(){
$("#thechoices").change(function(){
if($(this).val() == 0)
{
$("#value").html("disabled till you make a choice");
$("#value").css("background-color","black");
$("#value").css("color","white");
}
else{
$("#value").html($("#thechoices option:selected").text());
$("#value").css("background-color","white");
$("#value").css("color","black");
}
});
});
</script>
Here's a quick solution, just add this code:
CSS:
<style>
.disabled{
background-color: gray;
}
</style>
JavaScript
function onSelectedOption(){
var selectedText = $("#thechoices option:selected").text();
if($("#thechoices").val() == "0")
$('#value').addClass("disabled").text(selectedText );
else
$('#value').removeClass("disabled").text("");
}
$(document).ready(function(){
onSelectedOption(); //With this we 'disable' when page loads
$('#thechoices').change(onSelectedOption);
});
Hope this helps
Use the jQuery 'change' event. http://api.jquery.com/change/
$('#thechoices').change(function(){
$('#value').css('display','block');
});
$('#thechoices').change(
function() {
$('#value').text(
$('#thechoices :selected').text()
)
}
);