I am running a SQL query to get dropdown select value. The values are now int.
What I need to do is show the div when Dropdown Value is "Other"
So I am using this Jquery code to get the text of the dropdown that is selected. Which is working fine.
Working Example Fiddle
<select name="hours" id="hours" class="time">
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">Other</option>
<option value="06">06</option>
</select>
Script
<script type="text/javascript">
$('#hours').change(function() {
$('#hours_text').val( this.value );
$('#hours_text2').val($('option:selected',this).text());
});
</script>
The issue is when I am hiding the div. The text is not passing into Jquery. Its only accepting the option value. I need it to accept the text value which is "Other" not 05
Before the values were varchar so this was not an issue before.
Here is the code for hiding and showing Div.(not working) Fiddle
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
$('#' + $(this).val()).show.text();
});
Try this:
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
$('#' + $('option:selected', this).text()).show();
});
DEMO
the property for checking the text contained by the option would be .html() not .val()
Could you do something like this:
$('#hours').change(function () {
var sel = $('option:selected', this).text();
if (sel == "Other") {
$('.showotherpDescription').show();
} else {
$('.showotherpDescription').hide();
}
});
Here, this should do the trick. I added some console output so you can see what and why:
$('#hours').change(function () {
$('#hours_text').val($('option:selected', this).text());
$('.showotherpDescription').hide();
console.log($(this).val());
console.log(this.selectedIndex);
console.log(this.options[this.selectedIndex]);
console.log(this.options[this.selectedIndex].innerHTML);
$('#' + this.options[this.selectedIndex].innerHTML).show();
});
Related
I have a dropdown/select menu that shows and hides various divs based on what the user has selected. Within each div there is another dropdown/select menu that I would like to also trigger an action on change.
As this div is given an ID dynamically I am struggling to figure out how to select the required dropdown/select menu.
Here is the jQuery code:
$(document).ready(function(){
$("#category").change(function(){
var category = $("#category").val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
}) ;
var category = $("#category").val();
var selector = 'selector_'+category;
$("#"+selector).change(function(){
alert('Do something');
});
});
And some simplified HTML:
<select id='category'>
<option value='0'>1</option>
<option value='1'>2</option>
<option value='2'>3</option>
</select>
<div class='box class-name' id='1'>
<select id='selector_1'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
<div class='box class-name' id='2'>
<select id='selector_2'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
<div class='box class-name' id='3'>
<select id='selector_3'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
</div>
The divs show and hide as desired, but I can't for the life of me get the alert('Do Something'); to trigger which I assume is a problem with how I am trying to select the dropdown/select menu.
All help much appreciated!
Cheers, DB.
You need chain the changes. The way you made it, the code runs all at once, meaning:
When document ready, do:
Set onChange in the #category element
Find category current value (right now, none is selected, so value is undefined)
Set selector to "selector_" + undefined
Find element with id selector, since there's no element with this id, no change is defined.
Try this, instead:
$(document).ready(function() {
var categoryField = $("#category");
categoryField.change(function() {
var category = categoryField.val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
var selector = 'selector_'+category;
$("#"+selector).change(function() {
alert('Do something');
});
});
});
var category = $("#category").val();
Category is empty on page loaded.
Simple solution:
$(".box select").change(function(){
alert('Do something');
});
I checked, it's working
$("#category").change(function(){
var category = $("#category").val();
var box = $('#'+ category);
$('.class-name').hide();
box.show();
var s = $(box).find('select');
$(s).bind("change", function() {
alert("Do something");
})
})
Within each div there is another dropdown/select menu that I would
like to also trigger an action on change.
It seems you are looking to trigger event when there is a change in the dropdowns wrapped by the div
If it is so you can use jquery wild card selector
In your case all those select elements have same prefix id.
So $("[id^=selector_]") will response to to any select box which have such string as prefix
$("[id^=selector_").change(function(event){
$("#demoUp").text($(this).context.value);
});
Check this JSFIDDLE. The placeholder will be updated by the value of selectd option
To point you have change the id on document page ,use below
$(document).on("change",$("#"+selector),function(){
alert('Do something');
});
Try this:
$(document).ready(function(){
$("#category").change(function(){
var category = $(this).val();
$('.class-name').hide();
$('#'+ category).show();
$("#selector_"+category).change(function(){
alert('Do something');
});
}) ;
});
I am trying to get the content of a select option which is specified by the selected options.
I can get the selected options to tell me the data-parent but I can't use that to get the text of the parent option.
<select id="addCatSelectCats" multiple="multiple">
<option id="Cat55" data-parent="5">Parent Cat</option>
<option id="Cat357" data-parent="55">Sub Cat</option>
</select>
$(document).on('change', '#addCatSelectCats',function() {
$("#addCatSelectCats option").each(function(){
if($(this).is(':selected')){
var dataparent = $(this).attr('data-parent');
if(dataparent > 0){
var parent = $('#Cat'+dataparent).text();
alert(parent);
}
}
});
});
Where am I going wrong?
You could do with a little less code
$(document).on('change', '#addCatSelectCats',function() {
var parent = $("#addCatSelectCats option:selected").text();
alert(parent);
});
I recently posted about a problem I was having with not being about to ge the .val() from a selected dropdown. The code was correct but something was preventing the on change from firing correctly. I've narrowed the issue down and found when I remove the select box plugin it works as expected.
Can someone please help me get both to work, I'd like to keep select box on these dropdown && also write my own function that will pick up the selected value.
thanks.
Relevant code:
<div class="form-group">
<select name="numberOfAdults" id="numberOfAdults" tabindex="2">
<option>-Adults-</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
</div>
In script.js
//---------------------------------------------------
//------------------- Selectbox -------------------
//---------------------------------------------------
$(function () {
$("#numberOfAdults").selectbox();
$("#numberOfKids").selectbox();
$("#eventAttending").selectbox();
});
mt script that doesn't give me the value, instead it will also give '-Adults- - -Adults-'
<script>
$('#numberOfAdults').change(function() {
var val1 = this.value;
var val2 = $('#numberOfAdults option:selected').val();
alert(val1 + " - " + val2);
});
result:
You can try something like this:
$('#numberOfAdults').selectbox({
onChange: function (val, inst) {
alert(val);
}
});
Documentation: http://www.bulgaria-web-developers.com/projects/javascript/selectbox/
have this code, i want to convert it to be able to allow the user to pick ANY possible select and have div [id='setprice'] show up or something to that effect. currently i have 4 options, but it could be up to 10+ depends on how many are in the database. but it shouldn't matter, i just want which ever gets selected to open the setprice div. Thanks.
$("#category").change(function () {
$("#setprice").hide();
if ($(this).val() == "cow") { $("[id='setprice']").show(); }
else if ($(this).val() == "dog") { $("[id='setprice']").show(); }
else if ($(this).val() == "monkey") { $("[id='setprice']").show(); }
else if ($(this).val() == "kungfoo") { $("[id='setprice']").show(); }
});
HTML
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice'>this is hidden onload, then shows on any #category selection</div>
Seems to be alot of cofusion in what im asking, These options i've given are random names, the categories that are going to be loaded, are from a database and more could be added depending how it expands, so i want the script to not show div=setprice, but when anything gets selected in #category to open setprice.
You will need to call the function only when the value of the select box isn't empty.
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
Here is a working fiddle.
This is the cleanest you will get this.
DEMO
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
The $("#setprice").toggle(!!this.value); is just a way to use a boolean inside the .toggle() method,
otherwise you do it equally like:
var $setPriceEl = $("#setprice");
$("#category").change(function () {
$setPriceEl.hide(); // hide by default
if(this.value) $setPriceEl.show(); // show only if has value
});
or even:
$("#category").change(function () {
$("#setprice")[this.value ? "show" : "hide" ]();
});
Please find the answer below ...
HTML :
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice' style="display:none;">this is hidden onload,
then shows on any #category selection</div>
JQUERY :
$(document).ready(function(){
$("#category").change(function() {
$("#category option:selected" ).each(function() {
var str = $( this ).text();
if(str == "Select"){
$("#setprice").hide();
}else{
$("#setprice").show();
$("#setprice").text(str);
}
});
}).trigger("change");
});
I am jquery learner.
<select multiple id="update-select" data-type="test1, test2">
<option value="3">test1</option>
<option value="4">test2</option>
<option value="5">test3 test</option>
<option value="5">test test</option>
</select>
<input type="button" id ="btn" value ="click me">
$(document).ready(function() {
$("#btn").click(function(){
});
});
jsfiddle here
I am setting the data-type value dynamically based on some server data.
on clicking the button option whose value equal to data-type value must be selected
Here data-type values are test1 and test2 so option test1, and test2 must be selected on clicking the button
Note: data-type values can have two word values like test test, option text also
can have test test
$(document).ready(function() {
$("#btn").on('click', function(){
$('#update-select option').prop('selected', false);
$.each($('#update-select').data('type').split(','), function(i, opt) {
$('#update-select option:contains('+ $.trim(opt) +')').prop('selected', true);
});
});
});
FIDDLE
You can do like this:
$(document).ready(function() {
$("#btn").click(function(){
$('#update-select option').prop('selected', false);
var select = $("#update-select").attr('data-type').split(',');
for(var i=0; i<select.length; i++){
$('#update-select option:contains('+ $.trim(select[i]) +')').prop('selected', true);
}
});
});
check http://jsfiddle.net/alaminopu/V85Vx/23/
Use .filter() function to get your target option tags and select it afterwards.
$(document).ready(function() {
$("#btn").click(function(){
var xText =$('#update-select').data('type');
$('#update-select option').filter(function(){
return xText.indexOf($(this).text()) != -1;
}).prop('selected', true);
});
});
DEMO