Updated: I would like to control the visibility of the bottom divs based on the value of the top SELECT..
i.e
selected = dogs:: only bulldog, pitbull visible
selected = fish:: GOLDFISH! visible
etc..
Appreciate it.. Sorry I didn't do a better job of explaining my question initially -
<select>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="dog">bulldog</div>
<div id="cat">stray cat</div>
<div id="dog">pitbull</div>
<div id="cat">alley cat</div>
<div id="fish">GOLDFISH!</div>
Try this
$('#pets').change(function() {
$('#somepets div').hide();
$('#somepets div.' + $(this).val()).show();
});
But for this you should change your class names to match the values of the options. Also you need to give your "select" element an ID.
EDIT: To clarify a bit, this selector is going to try and find the select element by its ID "pets" so you need to add id="pets". The name and ID can be the same value.
EDIT: Since you're having some trouble with the HTML here is what it would need to look like to work with my method.
<select id="pets">
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="somepets">
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
function selectionChanged(){
HideAll();
var selected=$('#pets option:selected').text();
var selectString='.';
selectString+=selected;
$(selectString).show();
};
function HideAll(){
$('.dog').hide();
$('.cat').hide();
$('.fish').hide();
};
</script>
<select id="pets" onchange="selectionChanged()">
<option>dog</option>
<option>cat</option>
<option>fish</option>
</select>
<div id=somepets>
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>
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>
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 a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.
I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.
I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!
jsfiddle is here.
<div class="ccms_form_element cfdiv_custom" id="indSelectors">
<label>Type:</label>
<select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Pies">Pies</option>
<option value="Trees">Trees</option>
<option value="Cars">Cars</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="Pies" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Pies</label>
<select id="inds">
<option value="">- Select -</option>
<option value="28">Apple</option>
<option value="3">Cherry</option>
<option value="44">Pumpkin</option>
</select>
</div>
<div id="Trees" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Trees</label>
<select id="inds">
<option value="">- Select -</option>
<option value="38">Maple</option>
<option value="11">Oak</option>
<option value="14">Birch</option>
</select>
</div>
<div id="Cars" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Cars</label>
<select id="inds">
<option value="">- Select -</option>
<option value="39">Mazda</option>
<option value="62">Ford</option>
<option value="25">Toyota</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dropStyle").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
console.log("section:", section);
// do other stuff with the section name
});
</script>
Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.
what does document.getElementById("inds") or $("#inds") return? You will get the first element always.
Rather, use a class. Just change id="inds" to class="inds" and update code like below.
$('.inds')
.on("change", function () {
var section = $(this).val();
console.log("section:", section);
// do other stuff with the section name
});
Updated Fiddle
Try this jQuery Plugin
https://code.google.com/p/jquery-option-tree/
Demonstration:
http://kotowicz.net/jquery-option-tree/demo/demo.html
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>
I need to be able to hide/show multiple div tags on the same page via a drop down menu, but I want them to use the jQuery 'fadeToggle'. I can easily do this without 'fadeToggle' by using the following code:
function generateTask() {
document.getElementById('football').style.display = 'none';
document.getElementById('football2').style.display = 'none';
}
html:
<select name="something" id="something">
<option value="1" onclick="generateTask();">Football</option>
<option value="2" onclick="generateTask();">Cricket</option>
<option value="3" onclick="generateTask();">Baseball</option>
</select>
<div id="football">balls</div>
<div id="football2">shorts</div>
But this solution isn't as elegant. Any help would be appreciated.
The main complication is that the div tags "football" and "football2" might both be required for Cricket but only "football2" required for say Baseball.
You can try this
function generateTask(){ $('#football, #football2').toggle();}
Or yan can add classes on every elements that should be affected by your dropdown:
For example:
<div id="football" class="football">balls</div>
<div id="football2" class="football cricket">shorts</div>
<div id="cricket" class="cricket">stick</div>
And than target every element that's in link with your dropdown action.
If you can keep the value of the options as the ids of the divs then it will be much simpler.
Something like this
Markup
<select name="something" id="something">
<option value="football">Football</option>
<option value="cricket">Cricket</option>
<option value="baseball">Baseball</option>
</select>
<div id="football" class="content">Football content</div>
<div id="cricket" class="content">Cricket content</div>
<div id="baseball" class="content">Baseball content</div>
JS
$("#something").change(function(){
var id = "#"+this.value;
//This will hide all the divs with class content but not the selected option
$(".content").filter(":not("+id+")").hide();
$(id).fadeToggle();//This will toggle div based on the selected option
});