I am working on product filters where user select from the select box according to his/her preference but I am not getting selected value by user in jQuery.
html code:
<select name="product_filter" id="product_filter">
<option value="price_low_first">Price : Low to High</option>
<option value="price_high_first">Price : High to Low</option>
<option value="latest">Latest</option>
<option value="popular">Most Popular</option>
</select>
jQuery code:
$(function () {
$("#product_filter").change(function () {
alert("hi")
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
});
});
Hi I believe that your code is perfect. Once please check jquery.min.js is included in your file. Please check if there are any console errors.Thank you.
Related
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/
I am trying to set a default option in a select menu from the local storage, I am using a GUID as the value.
<script type="text/javascript">
$(document).ready(function () {
var guid = getParameterByName("dashId");
//$("#cboDashboards").val(guid); - Attempt #1
//$("#cboDashboards > option[value=" + guid + "]").prop("selected", true); - Attempt #2
//jQuery('#cboDashboards > option[value="' + guid + '"]').prop('selected', true) - Attempt #3
});
document.getElementById("cboDashboards").onchange = function () {
localStorage.dashboardGuid = this.value;
window.location.href = "/Home/Index?dashId=" + this.value;
};
</script>
The GUID that gets stored is the same as the GUID that I try to populate the combo box with, however, I have tried three different methods of trying to populate the combo box and none have worked. Any suggestions to why this isn't working as expected?
EDIT -
Would this method have any effect on it? It's called to populate the combo box with the values:
function populateDashboard(data) {
var options = $("#cboDashboards");
$.each(data, function () {
options.append($("<option />").val(this.DashboardGuid).text(this.Name));
});
}
I populated some test data -
<select id="cboDashboards">
<option value="0">Select dashboard</option>
<option value="1">Select dashboard 1</option>
<option value="2">Select dashboard 2</option>
<option value="3">Select dashboard 3</option>
#* <option value="0">Select dashboard</option>*#
</select>
and I did :
$("#cboDashboards").val('1'); // - Attempt #1
This worked, so I seem to be having a problem with the GUID value?
Try with jQuery using this code:
function populateDashboard(data) {
var options = $("#cboDashboards");
$.each(data, function () {
options.append($("<option />").val(this.DashboardGuid).text(this.Name));
});
var guid = getParameterByName("dashId");
//select element
$('#cboDashboards option[value='+ guid +']').attr('selected', 'selected');
}
I hope this help.
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();
});
I have done some research on this and everything said / suggested so far has failed to work.
I am trying to capture the input from a select tag, however nothing comes through, not even null.
The code:
function validateForm()
{
var name = $('#txtName').val();
var email = $('#txtEmail').val();
var tel = $('#txtTel').val();
var look = $('#lookingFor').val();
var goals = $('#goals').val();
alert(name + " " + email + " " + tel + " " + look + " " + goals);
return false;
}
HTML:
<select class="fomForm select" style="color:#777;"
id="lookingFor" name="lookingFor">
<option value="">I'm looking for</option>
<option value="">CYCLING</option>
<option value="">RUNNING</option>
<option value="">TRIATHLONS</option>
<option value="">TRAINING CAMPS</option>
<option value="">PERFORMANCE TESTING</option>
<option value="">DIET & NUTRITION</option>
<option value="">WELLNESS</option>
</select>
I apologise for asking this as there are quite a few resources on the internet however they don't seem to help this case. The name, email etc all display fine in the alert but the select boxes do not.
I have no errors in the console.
It is not showing because all the values in your select options are empty.
Try putting some value:
<option value="TRIATHLONS">TRIATHLONS</option>
you have no value in your select box option...so the alert is empty
<option value="">I'm looking for</option>
<option value="">CYCLING</option>
replace the value with the value u want....
<option value="iamlookingfor">I'm looking for</option>
......
$(function(){$(".fomForm").change(function(){
alert($(".fomForm option:selected").text()); })});
Take a demo in this fiddle: http://jsfiddle.net/tAxDv/
Seems like you are missing the value for options. They all say option=""
Put the value in there, and it should start working with $('#lookingFor').val()
If you don't have control on the html, or can't add values for whatever reasons, this should give you the text displayed in the option
$('#lookingFor option:selected').text()
I'm using an html select from which i need to get only one selected value, while debugging using firebug i'd seen 2 options are selected.
How can make this mutually exclusive using a jquery? Please help
<select id="test" title="select table" class="selectChangeClass">
<option value="None">None</option>
<option value="Equal">Equal</option>
<option value="NotEqual">NotEqual</option>
<option value="LessThan">LessThan</option>
<option value="GreaterThan">GreaterThan</option>
<option value="LessthanOrEqual">LessthanOrEqual</option>
<option value="GreaterthanOrEqual">GreaterthanOrEqual</option>
</select>
Script
$('.selectChangeClass').live('change', function(event) {
var changedText = $(this).val();
var controlId = this.getAttribute('id');
var indexSelected = this.selectedIndex;
//
this.selectedIndex = indexSelected;
$('#test' option[value="' + changedText + '"]').attr('selected', 'selected');
var opt = $('#' + controlId + ' option[value="' + changedText + '"]');
var html = $("<div>").append(opt.clone()).html();
html = html.replace(/\>/, ' selected="selected">');
opt.replaceWith(html);
});
try
$("#selecID").change(function(e){
var selectedVal = $(this).val();
console.log(selectedVal);
});
EDIT
var selVal = $("#test :selected").val();
alert(selVal);
DEMO
also see this to how to change the selected option http://jsfiddle.net/9ftwG/1/
and this http://jsfiddle.net/9ftwG/4/ to see how to clone and change the selected option
I am not entirely sure i understand the issue. At what point are you getting two options selected? Is Multiple set on the select?
Here is a JSFiddle updating a div on change of a select: http://jsfiddle.net/aMs8G/.