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>
Related
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 have a few divs that share the same class.
I have a dropdown that changes the background color of one of those divs when selected(option 2 changes div #2).
My question is how can I change the dropdown option when clicking a certain div?
I have the logic behind changing the actual option and the div clicks, but I can't figure out how to find exactly which of the divs was clicked(the divs are dynamically created, so they don't have Ids, only class names).
Is there any way to check what div was clicked relatively to the entire list of divs with the same class?
Thanks.
Example code:
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="4">third div..</option>
</select>
<div class="collection">random</div>
<div class="collection">text</div>
<div class="collection">inside</div>
<div class="collection">here</div>
Edit:
What I have:
The select can change the color of a div depending on choice.
Clicking a div changes it's own color.
What I need:
Clicking a div also changes the option in the select.
I hope it's a bit clearer now
With jQuery You can get the index of the clicked div by using .index()
$('div.collection').click(function () {
var index = $('div.collection').index($(this));
console.log(index);
$('select').val(index + 1);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection">Div4</div>
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="4">third div..</option>
</select>
You can use jQuery for this, It's very simple:
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="4">third div..</option>
</select>
<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection">Div4</div>
jQuery:
$('div.collection').click(function(){
var index = $('div.collection').index($(this)) + 1;
$('select').val(index);
});
Example: http://codepen.io/ilanus/pen/zBgvJr
Wrap the div around a parent div and use index() to get the position of div
$('.collection').click(function(){
var position = $(this).index()+1;
console.log(position);
$('.size').val(position);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="3">third div..</option>
<option value="4">Fourth div..</option>
</select>
<div>
<div class="collection">random</div>
<div class="collection">text</div>
<div class="collection">inside</div>
<div class="collection">here</div>
</div>
You can follow this Pen .
<div id='parentDiv'>
<div class="clickMe">1</div>
<div class="clickMe">2</div>
<div class="clickMe">3</div>
<div class="clickMe">4</div>
</div>
<select name="dropDown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<style>
.clickMe{
clear:both;
width:20px;
height:20px;
border:1px solid black;
margin: 20px;
}
</style>
<script>
$('#parentDiv').on('click','.clickMe',function(){
console.log($(this).index());
var index= $(this).index();
$('select[name=dropDown] option:eq('+index+')').attr('selected', 'selected');
});
</script>
Thanks. Please tell if it works fine.
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
How would I be able to display select menu when someone select the value option in style id? Code is like this.
HTML :
<div class="row">
<select name="style" id="style">
<option value="banner"></option>
<option value="text"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="language" id="language" style="display:none;">
<option value="EN"></option>
<option value="ES"></option>
<option value="FR"></option>
</select>
</div>
<div class="row">
<select name="english" id="english" style="display:none;">
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="spanish" id="spanish" style="display:none;">
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
<div class="row">
<select name="french" id="french" style="display:none;" >
<option value="text"></option>
<option value="img"></option>
<option value="vedio"></option>
</select>
</div>
SCRIPT :
$('#style').change(function(){
selection = $(this).val();
switch(selection)
{
case 'text':
$('#language').show();
break;
default:
$('#language').hide();
break;
}
});
$('#language').change(function(){
selection = $(this).val();
switch(selection)
{
case 'EN':
$('#english').show();
break;
default:
$('#english').hide();
break;
}
});
i want select text value i get language choice when i select language i get anther select menu
You are using the id selector $('#language') and your selects have no ids. You should give ids to each of your selects or use the attribute-equals selector $('[name="language"]') instead.
Try changing
selection = $(this).val();
to
selection = $('#style option:selected').val();
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>