Multiple Select bug in Firefox - javascript

I have a specific problem with multiple select values.
<form id="form-to-submit">
<select multiple="true" name="sel" id="sel">
<option id="0_1" value="0">Bacon</option>
<option value="1">Pickles</option>
<option id="0_3" value="2">Mushrooms</option>
<option value="3">Cheese</option>
</select>
</form>
<button id="setValues">Set Values</button>
JS:
$("#setValues").click(function() {
$("#sel").find("option").removeAttr("selected");
$("#0_1").attr("selected","selected");
$("#0_3").attr("selected","selected");
});
I've crated a JSfiddle which shows the problem:
When you click on Set Values button, it clears all options selected attribute, then sets it to selected for first and third options.
PROBLEM: In Firefox after second click on Set Values button, it clears the selection values.
In other browsers it works well.
Any ideas?

Instant solution!!!!
$("#0_1").prop("selected", true);
$("#0_3").prop("selected", true);
Some explanation ?!!?
So, what's the difference between .attr() and .prop()!!!
Basically, properties are of DOM elements whereas attributes are for HTML elements which are later parsed into DOM tree using browsers parser.
Because of some inconsistent behaviour amongst different browsers it's preferred to use .prop() instead of .attr().
Quoted from jQuery API Documentation :
"To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method."
There are lot's of reasons you want to switch to .prop(). Here's a great thread that helped me to dive into more of .attr() and .prop() ;)
.prop() vs .attr()

Two things:
To set the selected state, use prop, not attr.
In CSS selectors, and id cannot start with a digit, so #0_1 and #0_3 are invalid selectors. (They happen to work because of an optimization in jQuery where something that's obviously an id selector on its own ends up going to getElementById instead of a CSS selector parser like querySelectorAll or Sizzle's own parser, but it's not something you should rely on. For instance, if you had an element with id="123" and an element inside it with class foo, $("#123 foo") would throw an error.)
Fixes:
<form id="form-to-submit">
<select multiple="true" name="sel" id="sel">
<option id="x0_1" value="0">Bacon</option>
<option value="1">Pickles</option>
<option id="x0_3" value="2">Mushrooms</option>
<option value="3">Cheese</option>
</select>
</form>
<button id="setValues">Set Values</button>
$("#setValues").click(function() {
$("#sel").find("option").removeAttr("selected");
$("#x0_1").prop("selected",true);
$("#x0_3").prop("selected",true);
});
Updated fiddle

Related

Why does a jQuery disabled element look touchable in jQuery mobile?

I want to disable/enable a html select element programatically. My project is using jQuery mobile 1.4.5 and jQuery 2.1.4.
To disable the element in jQuery I do:
$('#filter_refn').prop('disabled', true);
Results after rendering in:
<select name="ref_id" id="filter_refn" data-mini="true" disabled="">
<option value="" selected="">Referenznummer auswählen</option>
</select>
This "somehow works. As the user can not select anything, however the box is still active and not disabled as it would be by doing it directly in html.
I noticed that the disabled property by jQuery does not contain "true"
example in jQuery mobile:
native html:
How can I disable the element in a similar way then in HTML?
You need use the functions provided by the jquery mobile API to change the state of their components.
Selectmenu Widget: disable():
$( ".selector" ).selectmenu( "disable" );
The styling of those elements is done by css rules and those utilize the [disabled] selector.
But if you do $('#filter_refn').prop('disabled', true); on a none user input element, then only the property disabled changes, but not the attribute. For elements like select, button, input, ... the $('#filter_refn').prop('disabled', true); will change both property and attribute.
Writing $('#filter_refn').prop('disabled', true).attr('disabled', true); would most certainly also change the visual appearance, but you still should use the functionality provided by the API.
How is your HTML doctype declared? In XHTML the "disabled" attribute must have a value, while in HTML it doesn't need to have a value. Also it may have something to do with your browser, so it'd be more helpful if you can provide more info on the DOCTYPE declaration and the browser you are using to test the page.
For my latest version desktop Chrome browser
<select name="ref_id" id="filter_refn" data-mini="true" disabled>
<select name="ref_id" id="filter_refn" data-mini="true" disabled="">
<select name="ref_id" id="filter_refn" data-mini="true" disabled="disabled">
all produce the same result when the doctype is html5, which should be the correct case.
However if your browser or doctype require the "disabled" attribute to have a value, you may use the jQuery "attr" function, that somehow
$('#filter_refn').prop('disabled', true);
produces
<select name="ref_id" id="filter_refn" data-mini="true" disabled>
while
$('#filter_refn').attr('disabled', true);
produces
<select name="ref_id" id="filter_refn" data-mini="true" disabled="disabled">
and see if that does what you want?

How can change disabled style for select box with javascript

I want to change the second's select box disabled style when the first select box is changed but I can't. Please help me.
<html>
<body>
<select onchange="a()" id="1">
<option>Choose</option>
<option>1</option>
<option>2</option>
</select>
<select id="2" disabled="true">
<option>one</option>
<option>two</option>
</select>
<script>
function a(){
if(document.getElementById('1').value!="Choose"){
document.getElementById('2').style.background="yellow";
document.getElementById('2').style.disabled="false";
}
}
</script>
</body>
</html>
disabled is a property of the element, NOT its style collection.
document.getElementById('2').disabled = false;
It is also important to note that 1 and 2 are NOT valid IDs in HTML older than HTML5, which means older browser may have severe issues with it (such as not recognising it as an ID, not finding it with getElementById, not styling it, etc.) I suggest giving meaningful IDs, even if it's just select1 and select2, that helps reduce the chance of accidentally duplicating IDs.
The "disabled" part is an attribute of the select element, not a CSS property.
Try this instead :
document.getElementById('2').disabled=false;
disabled is an attribute, not style property. That should do:
function a(){
if(document.getElementById('1').value!="Choose"){
document.getElementById('2').style.background = "yellow";
document.getElementById('2').disabled = false;
}
}

Changing the placeholder text based on the users choice

jQuery is permitted, but an HTML-only solution is preferred.
I have a select box with a couple of options. When the user selects 'Name', I want the placeholder text 'Enter your name' to appear in the adjacent text-box.
Likewise for 'ID' -> 'Enter your ID'.
See http://jsfiddle.net/Uy9Y3/
<select>
<option value="-1">Select One</option>
<option value="0">Name</option>
<option value="1">ID</option>
</select>
<input type="text">
This is a requirement by a client that I haven't been able to figure out.
If it helps, the website is using the Spring framework.
Since you need to update the placeholder when the select updates, you'll need to use javascript to do it.
You could set the placeholder you would like to display as an attribute on each option element using the HTML5 data- style attributes. Then use jQuery to attach a change event listener which will update the placeholder attribute of the input box.
Note that the placeholder attribute doesn't have any effect in older versions of IE, so if you need to support old IE you'll need to polyfill that functionality with another library.
Working Demo
HTML
<select id="mySelect">
<option data-placeholder="" value="-1">Select One</option>
<option data-placeholder="Enter your name" value="0">Name</option>
<option data-placeholder="Enter your ID" value="1">ID</option>
</select>
<input id="myInput" type="text">
jQuery
$('#mySelect').on('change', function() {
var placeholder = $(this).find(':selected').data('placeholder');
$('#myInput').attr('placeholder', placeholder);
});
It requires JavaScript. You can do it inline -- if that's what you mean by HTML-only.
<select onchange="document.querySelector('input').setAttribute('placeholder', 'Enter your ' + this.options[this.selectedIndex].text);"></select>
See the following jsfiddle for an example of how to do this:
http://jsfiddle.net/sW6QP/
Note that this is using jQuery ONLY because jsfiddle seems to be unable to find the function placed into the onChange event.
If you want to do it without jQuery, change the select line to this:
<select id="selectionType" onChange="setPlaceholder();">
And instead of $("#selectionType").on("change",function() {, do this instead:
function setPlaceholder() {
(make sure to change the }); to } as well)

change value of dropdown menu <select>

If I say have the following element, how do I change the selected value in it dynamically from jquery? (I know there are alot of threads of this subject here and I have tried them but I just coudn't get it to work)
<div class="styledDropDown">
<form name="viewBeds" method="post" action="formhandler.cgi">
<select name="title" onchange="javascript:showHideBeds();">
<option selected value="All">All</option>
<option value="Hannes">Hannes</option>
</select>
</form>
</div>
I want to switch between these values so that the selected value becomes "Hannes" instead of "All".
How is this done easiest?
Trid the following without success
function showHideBeds(){
$('.styledDropDown').val('Hannes');
}
Hope you understood the question =)
You need to set the .val() for the select element, $('.styledDropDown') is a div
This will do
$('.styledDropDown select').val('Hannes');
Demo: Fiddle
You can do
$("select[name='title'][value='Hannes']").attr("selected", "selected");
You can change the current value with
$('#setSelectedOne').click(function(){
$("#title option[value='Hannes']").attr('selected',true);
});
But I do not understand why you would do that with Javascript as the browser has its own do deal with Select boxes...

Getting DOM by name attribute in dojo javascript framework

How to get a DOM using dojo by the tag name?
I have a html code like this :
<select name="limit">
<option value="10">10</option>
<option value="25">25</option>
</select>
in jQuery framework, it will be:
var limit = $("select[name=limit]");
...but in Dojo framework, what must I do ?
Should I use dojo.query("select[name=limit]") ?
Yes, dojo.query("select[name=limit]") is correct, but remember that in dojo, it returns an array (even if there is only one match in the DOM). So to get the first (and possibly only) match, you need select the first element:
var limit = dojo.query("select[name=limit]")[0];
Consider you have an input field named 'myInput'. <input id="1" name="myInput" />
For getting a value (or other attribute) use following:
([0] define index of your component)
dojo.query('[name="myInput"]').attr('value')[0];
If you want to set some value, you will do this:
dojo.query('[name="myInput"]')[0].value = 'newValue';

Categories

Resources