I want to fetch the selected option from dropdown. I know I can get selected option with jQuery(dropdown).val(). But I am not able fetch the selected with the 'val' function.
Am I doing anything wrong here?
Just use this:
var selectedValue = $('.daterange-preset').val();
(Note: I was able to see your code and get your class name by zooming in, but in the future please post the code rather than a screenshot.)
try using .on( "change" and then finding the option where selected has been applied. I have attached a jsfiddle with a working example that will alert you the value of the selected option everytime you change it.
$('.datarange-preset').on( "change", function(){
var datarangeSelected = $('.datarange-preset').find(":selected").val();
alert(datarangeSelected);
});
http://jsfiddle.net/g8hVA/
I figured out the issue. In my code at one place dropdown value was getting set with the null.
$daterangePreset.val(someVarialwithNullValue);
Because the value was getting set with null. I don't see any update in the HTML. HTML still shows one of the option as 'selected'. So when I was trying to get the selected value with following syntax it was always returning null.
$daterangePreset.val();
You can use a variant of:
var text = $("option:selected").text();
var value = $("option:selected").val();
Related
I'm using a fake select box in my script which means the original select box is hidden and for styling purposes a ul is showing up. Whenever the selected value of this list changes the orginal select box does too.
There is a change function for that. Within that function is following code:
var el = $(e.currentTarget) ;
$('#my_select_box').children().removeAttr('selected');
$('#my_select_box option[value="'+el.attr('data-value')+'"]').attr('selected','selected');
After that change I want to retrieve the new selected value of the original select box in another function.
But the normal selector only gets the original value, not the new:
$('#my_select_box option:selected').val() //returns the wrong value
So how to I get the new value in the function I need it?
I tried this function:
$("#my_select_box").bind("DOMSubtreeModified", function() {
console.log($(this).find('option:selected').val());
});
It returns the correct value but not where I need it. So how can I retrieve the correct select box value out of the domtree live?
Thanks in advance!
instead of .attr('selected','selected');, try .prop('selected', true);
I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog
To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;
Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox
use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working
I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.
try this
document.getElementById("d_amount").value=m;
you don't need innerHTML
I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});
I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.
I am implementing this JQuery UI multiselect from http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
When I'm trying to validate my single select dropdownbox, even if nothing's been selected and the "Please Select" is visible, it still thinks that the first item in the list is the selected one.
$("#ddlAlternativeCode option:selected").val() just gets back the value of my first item in the dropdown. I need it to be 0 or null. Can anyone help me?
You dont need to write "option:selected" in the $("#ddlAlternativeCode option:selected").val()
Try this instead:
$("#ddlAlternativeCode").val();
You should be able to see it working by adding this following alert which should show NULL if nothing is selected:
alert("value= "+$('#ddlAlternativeCode').val());
where the id is the id of the selector.
If that doesn't work, your javascript has an error somewhere.
The other way of collecting selected values with Eric's script is via the "GetChecked" method call on the API. See example here:
var array_of_checked_values = $("select").multiselect("getChecked").map(function(){
return this.value;
}).get();
So, I have in my script the following code to assign the value of several text boxes that is working ok.
However, when I attempt to assign the value of a checkbox, nothing seems to be set for the checkbox. I have tried using .prop and .attr, so I am thinking my entire approach is wrong.
Some help would be greatly appreciated.
Here is my unchanged code. I am trying to assign the value of the "#id_language_detail_multiple_languages":
function setLanguageDetailsFormValues() {
$('#id_language_detail_display_type').val('{{ language_details.language_detail_display_type }}');
$('#id_language_detail_multiple_languages').val('{{ language_details.language_detail_multiple_languages }}');
....
If you want to assign the "value" of your text boxe, you will add to do something like this:
$('#YourId').attr('value', 'setYourValueHere')
If you want to have the value of your text box, just do:
var myValue = $('#YourId').attr('value')
That is the same thing for '.prop' !
If it wasn't what you wanted, be a little more specific or give us a http://jsfiddle.net/ :-)
By the way, you can also do:
if you go 1 checkbox:
$("input[type='checkbox']").val('yourValue');
Or just:
document.getElementById('yourCheckbox').value = 'YourValue';
If the value isn't set, it will return undefined, so be aware and check if it is !
Hi You can do it like following.Properties for checkboxes are different from textboxes.
$("#CheckboxID").prop("checked","True");
if you want to read the checkbox value use like following
$("#CheckboxID").prop("checked");
Thanks.
I have a dropdown box that has a list of institutions in it. Now if I manually select an option, it works and I am able to grab the correct value.
However, I have a select rates button which uses JavaScript to pull up a rate sheet. You select a rate from that sheet and it will select an option from the dropdown for you (one that corresponds with the rate from the rate sheet). If I use this method, it doesn't trigger a .change() therefor I can't get a value for the selected option.
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").text()
$("fi").text(value);
});
Any suggestions? I have tried .change() and .click() but nothing.
Once you are in the change function you don't have to do another search or selector because you already have the object you just have to find the selected option from it. So you can try this:
$('#id_financial_institution').change(function () {
var value = $(this).find("option:selected").text();
$("fi").text(value);
});
If the code still doesn't return you answer start to add alerts at each point to see where you are and what values you have and work your way from there?
Rather than .text() use .val()
$(function() {
$('#id_financial_institution').change(function () {
var value = $("#id_financial_institution option:selected").val()
alert(value);
});
})
Here is a sample demo, without your html. I am just alerting the value.
DEMO
You're going about this all wrong. You already have the select element in this, all you need is the value of that select element.
$('#id_financial_institution').change(function () {
var value = $(this).val();
$('#fi').text(value); //i assume `fi` is an [id]
//do more stuff
});
I went inside my AJAX call and got the value of the fields I needed there. For some reason, when using the AJAX call, it wouldn't fire the .change() on that particular field.
Thanks for all your input everyone.