$('select option:selected').text() and Attr.specified is deprecated warning - javascript

In my project I need to update a backbone model with both the selected value and text from a <select>.
For this purpose I am calling
model.set 'value', $('select').val()
model.set 'value_text', $('select option:selected').text()
(I am using coffee script as well). Because of some problem in jQuery v2.0.3 which I am currently using I am receiving this warning:
Attr.specified is deprecated. Its value is always true.
I know there were questions on SO about this warning, but I want to ask something completely different:
Since updating to a newer version of jQuery (where the problem might be fixed) is not possible in next few months I would like to ask whether there is other way round to receive the selected option's text instead of that used above. I am not against pure JS solution if there is no other using jQuery.
Any help is highly appreciated.
EDIT for #KevinB: The warning is caused by asking whether there is selected attribute on that option.

To *fix* it without changing anything else, you can just use .filter.
$('select option').filter(function (i) { return this.selected; }).text();

I prefer do that in a different approach. See the code.
Inside view.
events:
"change input":"updateModel"
"change select" : "SelectedItem" //Just for example.
selectedItem:(element)->
selectedOption = element.target.selectedOptions
alert **selectedOption.item().value** // the value of the selected item. now you can set it on model.
updateModel:(element)->
#model.setNew(element.target.name, element.target.value)
Inside model.
setNew:(newName, newValue)->
#set newName, newValue
Html file.
<select>
<option value="renan">Renan</option>
<option value="carvalho">Carvalho</option>
</select>
<input type="text" name="customer" />
Hope it helps.

Related

attr('selected','selected') not working in selectpicker bootsrap with ajax [duplicate]

I am attempting to retrieve and set the selected value of a select element (drop down list) with jQuery.
for retrievel i have tried $("#myId").find(':selected').val(), as well as $("#myId").val() but both return undefined.
Any insight into this problem would be much appreciated.
to get/set the actual selectedIndex property of the select element use:
$("#select-id").prop("selectedIndex");
$("#select-id").prop("selectedIndex",1);
The way you have it is correct at the moment. Either the id of the select is not what you say or you have some issues in the dom.
Check the Id of the element and also check your markup validates at here at W3c.
Without a valid dom jQuery cannot work correctly with the selectors.
If the id's are correct and your dom validates then the following applies:
To Read Select Option Value
$('#selectId').val();
To Set Select Option Value
$('#selectId').val('newValue');
To Read Selected Text
$('#selectId>option:selected').text();
$('#myId').val() should do it, failing that I would try:
$('#myId option:selected').val()
When setting with JQM, don't forget to update the UI:
$('#selectId').val('newValue').selectmenu('refresh', true);
$("#myId").val() should work if myid is the select element id!
This would set the selected item: $("#myId").val('VALUE');
Suppose you have created a Drop Down list using SELECT tag like as follows,
<select id="Country">
Now if you want to see what is the selected value from drop down using JQuery then, simply put following line to retrieve that value..
var result= $("#Country option:selected").text();
it will work fine.
I know this is old but I just had a bear of a time with Razor, could not get it to work no matter how hard I tried. Kept coming back as "undefined" no matter if I used "text" or "html" for attribute. Finally I added "data-value" attribute to the option and it read that just fine.
<option value="1" data-value="MyText">MyText</option>
var DisplayText = $(this).find("option:selected").attr("data-value");
$( "#myId option:selected" ).text(); will give you the text that you selected in the drop down element. either way you can change it to .val(); to get the value of it . check the below coding
<select id="myId">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>`
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Try this
$('#your_select_element_id').val('your_value').attr().add('selected');

Setting Default value of input textbox in Jquery EasyUI dialog

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.

Special characters breaking up on onchange

I'm having a problem once again, and as you always helped me solve it, hence i'm here again.
In Joomla, we have created a website used for renting/bookings of Villa's with the portal Jomres.
Now in the backend, we can change the location of a Villa ofcourse, and this work with a dropdownbox with an onchange function.
Now here lies the problem, if we for example, click on: Cala d'Hort
Then in the inputfield(not writable) it comes as Cala d.
It breaks up everything after the apostrophe.
I've tried a bit with encoding or escaping characters, however it did not work.
The little Javascript that is behind this is:
function stext(selectid, textid) {
var select = document.getElementById(selectid);
var selectvalue = select.value;
var text = document.getElementById(textid);
text.value = selectvalue;
}
And the HTML:
<select onchange="stext('select', 'town')" id="select" class="sbox">
Is there a way that it does not break and provides the full name instead of breaking it down?
Thank you in advance!
Jeroen
This jsfiddle describes both a working and a non-working example using the JavaScript you provided. The HTML is as follows:
<select id="test1" onchange="stext('test1', 'test2')">
<option value="Cala d'Hort">Cala d'Hort</option>
<option value='Cala d'Hort'>Cala d'Hort</option>
</select>
<input id="test2" type="text" disabled />
My guess is that you have incorrectly nested quotes in your option tags.
Try seeing how the options of the select box are being populated (if they are being inserted with double-quotes). This should work if that is the case. Try using the console or alert to see which value is being fetched as your "selectValue". If that value is already wrong, that means the options from the select box is being already wrongly populated. Maybe you can provide a jsfiddle of your example and we can look at it more further.

Is there a simple way to know the starting value of a select?

I'd like to do this simply without saving the starting value of the select in an object.
if i have (when i load the dom):
<select>
<option value='1' selected>one</option>
<option value='2' >Two</option>
and than i later change the selection so that another option is selected, is there some kind of property that stores the value of the option that was originally selected?
I think this sholud work:
$("select option[selected]").val()
fiddle: http://jsfiddle.net/4dCMd/
Tested this way in different browsers: seems to be broken in IE7/8, works in last Chrome, FF and IE9
You should use the defaultSelected property of the options object to test if it was selected by default.
http://www.javascriptkit.com/jsref/select.shtml
use this
$('select').find('option[selected]').val();
DEMO
$('select').each(function(){
$(this).data('originalValue',$(this).val());
});
You could do this on .ready. It'll store the default values of every select in it's data object.
Oh just re-read your question and you said that's exactly what you don't want.
Well, i don't think there's another efficient way to do it so i'll leave it here anyway.
simple to use filter to get any default selected options:
var def = $("select > option").filter(function () {
return this.defaultSelected;
});
DEMO
DefaultSelected
Reflects the value of the selected HTML attribute. which indicates whether the option is selected by default.

IE not clearing select value

i am using a simple piece of jquery to clear the contents of the select in a form, but in iE all versions, the select is not clearing. it is ok in FF, just not doing it in IE. can anyone see where i have gone wrong with this? i have posted the relevant part of the code. thanks
UPDATE:
what i am trying to achieve is when a form is submitted the inputs are cleared and the select/option returns to it default state like when the page was loaded.
Answer if it will help anyone else: $("select").prop('selectedIndex', 0);
/*Show submitted*/
//$(".done").show(500).slideUp(300).delay(800).fadeIn(400);
$(".done").html("<div id=\"boxSuccess\">Message sent successfully!</div><br />");
/*Clear input values*/
$("input").val("");
/*Clear slelect values*/
$("select").val("");
$(".done").fadeIn(4000).fadeOut(4000);
A single-selection <select> element can't really be "cleared"; some <option> in it must be showing. What you could do to make sure that (for example) the first option is showing is
$('select').get(0).selectedIndex = 0; // or $('select').prop('selectedIndex', 0);
edit — a look at the jQuery (1.5.2) source tells me that when the searched-for value can't be found as the value (or, if no "value" attribute, the text) of an option, then it sets the "selectedIndex" to -1. A quick jsfiddle should show what effect that has in IE.
edit again — a quick test suggests that IE doesn't pay attention to the "selectedIndex" being set to -1.
more Here is a relevant jQuery bug report. Personally I don't think it's really a bug in the case of a single-select dropdown. For a multi-select I could see an argument, though it's always possible to do:
$('select option').prop('selected', false);
to de-select everything in a multi-select. Doesn't work for a single-selection element however because, again, that doesn't really make sense. The element will always cause the value of one of its options to be submitted with the form, so it really can't be "cleared" unless one of the options has an empty value.
even more — If one of your options has the "defaultSelected" attribute (or property), then you could make it be the selected option with:
$('select option').each(function() {
this.selected = this.defaultSelected;
});
Because you are setting the value on a collection of objects i think.
I'd do it this way:
$("select").add("input").each(function(){
$(this).val("");
});
instead of
/*Clear input values*/
$("input").val("");
/*Clear slelect values*/
$("select").val("");
This is valid (obviously) only if you have an option with value='' and this is what you want to reset the select to. Like
<option value=''>Select a value</option>
$("select").val(""); should merely set as selected whichever item has "" as its value. If you want to actually remove the items, you want something like $("select option").remove();

Categories