Develop Reference

Why can't I change text of select option?

I have an html select with options inside. With jQuery I'm able to select and read option's text but I'm unable to modify it using either .html('my_text') and .text('my_text).
Here is my HTML :
<select id="select_format_date" name="select_format_date">
<option id='0' value="0">jj/mm/yyyy</option>
<option id='1' value="1">jj mm</option>
<option id='2' value="2">jj month short</option>
<option id='3' value="3">jj month full</option>
</select>
And here are my attemps to modify their texts with jQuery :
alert($("#select_format_date option[id='0']").text());
$("#select_format_date option[id='0']").text('TEST');
$("#select_format_date option[id='0']").html('TEST');
As said the alert display the option's text correctly so the selector is good but I can't modify the text I don't understand why, my jQuery is in a $(document).ready(function() {}) so the DOM should be fully loaded. Both HTML and jQuery are in the same file. I also tried to add the .change() but didn't work.
Any ideas of what could cause that ?
Thanks for you time reading and helping.
EDIT
Problem solved I had a plugin .jqTransform messing up with my html, thanks for you time !!

As you can see in the below snippet, both .text() and .html() worked for me.
$(document).ready(function() {
alert($("#select_format_date option[id='0']").text());
//$("#select_format_date option[id='0']").text('TEST');
$("#select_format_date option[id='0']").html('TEST');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select_format_date" name="select_format_date">
<option id="0" value="0">jj/mm/yyyy</option>
<option id="1" value="1">jj mm</option>
<option id="2" value="2">jj month short</option>
<option id="3" value="3">jj month full</option>
</select>
Maybe your jQuery is not loaded or some error may stop the parse process somewhere in the rest of your code?

you don't need to define a id for your options, just try this
("#select_format_date").val('value').change();
this is a fastest and simple way to change the selected value and text of select tag with jquery in my opinion.

Open selectbox option using jquery

I want to show selectbox option using jquery when the page loads. I have used .simulate() and .trigger function but it's not working, so can you please suggest some solution for that.
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="simulate.js"></script>
<script>
$(document).ready(function(){
$("#test").simulate('mousedown'); // not working
$("#test").trigger('click'); // not working
//$("#test").attr('size',3); // size is not as i need. i want to display option as any dropdown shows.
});
</script>
<select id="test">
<option value="0">select option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Please help me to out from this problem...

Try this...
$(document).ready(function(){
var myDropDown=$("#test");
var length = $('#test> option').length;
myDropDown.attr('size',length);
$("#test").click(function(){
myDropDown.attr('size',0);
});
});

I think it's not possible. There's a lot of jQuery plugins out there to enhance the native select's functionality, like the Selectmenu Widget of jQuery UI which has an "open" method:
http://api.jqueryui.com/selectmenu/#method-open
or for Twitter Bootstrap:
http://silviomoreto.github.io/bootstrap-select/methods/#selectpickershow
just to name some...

It's not possible to open a selectbox with JavaScript.
I tried and got disappointed. I finally changed the attribute size for the select box so it appears to be open:
$('#test').attr('size',3);
and then when you're finished
$('#test').attr('size',0);
Hope that helps :)

Materialize duplicated items on javascript initialization

I have being playing around with materializecss on my joomla website. I have a T3 framework template ( I am pretty new to web development).
The problem I have is that whenever I use an item that requires js initialization it gets duplicated, one with the javascript style and one with the css one. For example this happens when using a select item or datepicker. I use the example code given here:
http://materializecss.com/forms.html
Another strange thing is that the styles are not fully applied, for example the input field its never applied.
thank you
EDITED:
javascript code:
$(document).ready(function() {
$('select').material_select();
});
css:
<label>Materialize Disabled</label>
<select disabled>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
image:
http://i.stack.imgur.com/AV927.png
When I say that the style is partially applied I meant that it doesn't look as shown in the materializecss webpage, it looks like if it was disabled.

I had the same problem and this is how I was able to fix it, hope it works for you.
a) Put all the initialization for materialize elements in a function
function initializeMaterialize() {
// initialize materialize slider
$('.slider').slider();
// initialize materialize select
$('select').material_select();
// initialize materialize datepicker
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 20,
onSet: function(ele) { if(ele.select) { this.close(); } },
format: 'mm/dd/yyyy',
formatSubmit: 'yyyy-mm-dd'
});
}
b) Then call the function on `$(window).load(function(){});
$(window).load(function() {
initializeMaterialize();
});
This will make the call only once so you will get only one copy of each of the elements.

You'll get this duplicate on first DOM load or after?
Because i think you initialize same function .material_select() 2 or more times...

JQuery mobile adds form element after calling a async function

I'm using jquery mobile. In my form I have two selectmenu filterable plugin. After I push the button (not submitting the page, only calling a javascript async function that sends parameters to server), the structure of the page is not the same as before. The filter textboxes are shown below each "select" method, and nothing works! I expanded the elements of the page, and I saw that it automatically wraps element with tag (after the function ends). So maybe that's why the structure is disassembled. Any idea how to fix this problem?
UPDATE:
This is the code for html (other codes are originally from jQuery):
<div class="ui-field-contain">
<select id="lstProjects" data-native-menu="false" class="filterable-select">
<option>Select Project</option>
</select>
</div>
<div class="ui-field-contain">
<select id="lstDuration" data-native-menu="false" class="filterable-select">
<option>Select Duration</option>
</select>
</div>

Change text inside dynamic div when on select change is made jquery

I have a title for my drop down that is dynamically given and I can currently change it when the page loads. But once I select an item from the drop down it changes back. I am looking for a simple jquery js solution that can help keep the name when an item is selected.
I need to change the text in: #shippingStateSpan from Destination State -> Destination Province and leave that way even after something is selected.
Here is my html:
<div class="shippingStateDiv">
<span id="shippingStateSpan">Destination State<br />
</span>
<select name="shippingState" id="shippingState" class="shippingDropDown"
onchange="ApplyTaxRate(this.value,4040828,1,1,0);">
<option value="-1" selected="selected">Please Select</option>
<option value="129654">AB</option>
<option value="129653">BC</option>
<option value="129652">MB</option>
<option value="129647">NB</option>
</select>
</div>
Here is my js I use to make the change on initially (But it changes back after I select something) I assume a jquery .on function may be possible but I an not sure how to do it. Thanks for the help.
<script type="text/javascript">
$("#shippingStateSpan").text("Destination Province");
</script>

Try this:
$(document).ready(function(){
var $select = $('#shippingState'),
$span = $('#shippingStateSpan');
$select.on('change', function(){
$span.html('Destination Province');
});
});

Try this
​$(function() {
$('#shippingState').on('change', function() {
$('#shippingStateSpan').text('Destination Province')
});
});​
Check out the working example here http://jsfiddle.net/sushanth009/zp7bA/