Why can't I change text of select option? - javascript

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.

Related

JQuery set select using .prop('selectedIndex', #) not working

I'm using the following line to set a option from a select menu:
$('select').prop('selectedIndex', 2)
Using the following site as a example:
http://shoebaloo.nl/michael-by-michael-kors-chelsea-skate-leo-bruin-dessin-285000097-women-sneakers.html
I am indeed seeing the select option going to the second option but it wont have the same effect as actually clicking on the second option.
Can someone help me so the page actually recognises me "clicking" on a option?
You need to select the option with a selector.
$('select option:eq(2)').prop('selected', true)
If you're looking to manually trigger a click or change event, you could use the .trigger('click') or .trigger('change') methods.
http://jsfiddle.net/j5v6tp7t/4/
All you should have to do is use .val() to set the value.
For example:
$('select').val('2')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
</select>
Your expression was right but the correct syntax is :
$('select').get(0).selectedIndex = 2;
http://jsfiddle.net/f4s762cq/

How to add a DIV to select option using javascript

My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

Modify selected property in select option

I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!
You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>
I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);

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...

Applying rateit jquery plugin to a select box

I have the following select form element, and I want to apply the rateit jquery plugin to it.
<select class="test" id="Rating" name="Rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
and I am trying to apply the plugin using $("select.test").rateit();, but despite fireQuery showing data attached the the select element that, no effect is made and I am still left with a select box, and not a line of stars.
EDIT
CSS File is included
Here is the page in question
You're using the plugin wrong. See very simple example: http://jsfiddle.net/rudiedirkx/ZuJ2k/
The select has to be there, but you still have to reference the div when you call the plugin: $('div#rating2').rateit();
The div then has a reference to the select with a data attribute: data-rateit-backingfld="select#Rating"
edit
Actually it looks like you're not using the plugin at all? Where do you call the plugin?
edit
This is your code:
rateItDiv = $('<div class="rateit" data-rateit-backingfld="#Rating"></div>');
$("div#ReviewInputZone select.test").after(rateItDiv);
$('div#rateit').rateit();
On the last line, you reference div#rateit, but that div doesn't exist. You just created a div.rateit, not a div#rateit. Change either of those to the other, and it should work. I'd keep the # because that's slightly faster (but you'd have to be sure there's only one of these rateit dropdowns on a page).
So the new first line:
rateItDiv = $('<div id="rateit" class="rateit" data-rateit-backingfld="#Rating"></div>');
edit
Also, you can test it before you change any code. Just open your Javascript console (Firebug in FF or Developer tools in Chrome) and type: jQuery('div.rateit').rateit();

Categories

Resources