jquery: select options and background color - javascript

Greetings,
Having a such select box:
<select id="events">
<option value="1" style="background-color:green;">Event 1</option>
<option value="2" style="background-color:yellow;">Event 2</option>
<option value="3" style="background-color:blue;">Event 3</option>
<option value="4" style="background-color:red;">Event 4</option>
</select>
At the initial browser render of this selectbox and each time a selection is done, I want the selectbox "events" to get the background-color of the selected option.
How can this be achieved via jquery or via regular javascript ?

//Alert color on initial page load
var bkg = $("#events option:selected").css("background-color");
alert(bkg);
//Handle change event and alert color when selection is done
$(function(){
$("#events").change(function() {
var bkg = $("#events option:selected").css("background-color");
alert(bkg);
});
});

selected
$('#events').bind('change', function() {
var bgc = $(this).find('option:selected').css('background-color');
});

You can do this:
$("#events").change(function() {
$(this).css("backgroundColor",
$(this).find(":selected").css("backgroundColor")
);
}).change();
You can test it out here. But, this won't work in all browsers, especially in IE the <select> element is notoriously unstyleable (for lack of a better...or real word). It'll work in the browsers that support it and just have no effect in the ones that don't. You may instead wait to style a parent element to give an indicator in all browsers, something like this.

IE friendly way, this has to applied to option tag.
$(this).html($(this).html());

Related

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/

Detecting when the user chooses an option from a dropdown

I have a classic HTML select box:
Show:
<select name="show" id="showThreads">
<option value="all" selected="selected">All</option>
<option value="new">Only unread</option>
</select>
Now, I need JavaScript to make an Ajax request when the user changes the selection in the box (without jQuery).
I have tried:
Listening for clicks on the <option> tags, but it won't work for users using a keyboard or a touch device
on an interval, looping though the <option> tags and checking if the selected one changes, but it seemed to trigger even when I simply hovered over the second option.
Is there a way of doing this that will work on all browsers/devices?
Thanks!
Try the "change" event.
document.getElementById("showThreads").onchange = function() {
};
Listen for onChange on the <select> tag.
function yourAjaxCall(something) {
}
<select name="choice1" size="1" onchange="yourAjaxCall(this);">
<option value="one">first</option>
<option value="two">second</option>
<option value="three">third</option>
</select>

How initialize dropdown (<select/>) with preselected value and then change it?

I've got a grid with dropdown in every row and I need to render it's state from DB.
So I've got dropdowns defined like that with selected option specified for preselecting the value from DB.
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>​
The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don't move and stays where it was.
So when I then call $("#selectId").val() I get the old one value.
What's the appropriate way to initialize dropdown control and then have an ability to freely change it's value in browser or by jQuery?
This seems to be working fine (Firefox on Ubuntu):
HTML
<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>
JS
$('#selectId').change(function() {
var opt = $(this).find('option:selected');
console.log([opt.val(), opt.text()]);
});
var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');
If you select the options, you'll see that it will print the changed version. Working example:
http://jsfiddle.net/vm4Q8/
Hope this helps.
It should work fine. May be you are not setting it correctly.
You should pass the value of the option to val() method to select it.
E.g $('#selectId').val('1'); will set first option as selected and afterwards calling $('#selectId').val() will give you 1 and not 2.
Here is the working example http://jsfiddle.net/3eu85/
You can get the val of the option selected, instead of the select
$('select#selectId option:selected').val();
Docs: http://api.jquery.com/val/
Which browser are you trying this in? Your code looks fine to me, and appears to be working in this jsFiddle.
please use this code instead,
$('#selectId option:selected').val();

hide() not working in IE [duplicate]

My code works perfect in firefox and gives error in IE. any ideas?
I have a dropdown with various options, I am trying to show/hide options in another dropdown based on the selected value.
function selectNames() {
var Name = $("#SelectName").attr("value");
$("."+Name).each(function() {
$(this).hide();
});
}
<select >
<option class="Name1" value="SomeName1" </option>
<option class="Name2" value="SomeName2" </option>
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
<option value="Name1" </option>
<option value="Name2" </option>
</select>
Any help is appreciated..
Make sure you close the start tag. Try to use this:
<select>
<option class="Name1" value="SomeName1" />
<option class="Name2" value="SomeName2" />
</select>
<select id="SelectName" onchange="javascript:selectNames();" >
<option value="Name1" />
<option value="Name2" />
</select>
Seems to work for me in IE8.
It won't work in IE & Chrome
check out in IE or Chrome
The best alternative that you can do is to remove the option rather than hiding it.(you should keep a copy of the original options before removing it.)
var copy = $("."+Name).clone();
function selectNames() {
$("#thefirstselect option").remove();
copy.appendTo("#thefirstselect");
var Name = $("#SelectName").val();
$("."+Name).each(function() {
$(this).remove();
});
}
Your markup is not correct. You are each option open tag isn't properly closed.
Also, the specs do not specify CSS changes to individual option tags, though it does work on Firefox.
In simpler words, you cannot hide individual inputs - in which case, you'll have to remove them.
If this is a direct copy and paste then you need to close the select options to look like this:
<option value="Name1">Name1</option>
<option value="Name2">Name2</option>
I would suggest having two selects that you show and hide. Show and hide of options sounds risky.
Also, make sure you set the hidden select to attr('disabled','disabled')/disabled="disabled" and then when you unhide it undo that with removeAttr('disabled'). This is to prevent the hidden select from posting data to the server when you have multiple selects with the same name="...".
If you must use a single select, you may want to appendTo/remove the options, but that is up to you. If show/hide works in all browsers, go for it.
Sadly, you just can't.
IE don't support hide of individual options in a select, neither Chrome or Opera.
This feature isn't cross browser.
What you can do is remove the option and add it again later...

Javascript Event for Select element Selection

I'm looking to find the Javascript Event I need to put into jQuery's .bind function in order to have the function triggered when a selection is made from a <select> element.
At the moment I'm using .bind('change',function() { ...}) but I need the event to trigger when the selected option is chosen again.
Any suggestions?
I'm currently doing this successfully by clearing the dropdown box selection so that it can be re-selected. It will allow you to trigger the function again by adding this within your function before the end:
$('select option:selected').removeAttr('selected');
Change on select boxes is unreliable anyway. Read:
http://www.quirksmode.org/dom/events/change.html#t05
I'd probably go for something click (but be suspicious, somebody (--> IE) is going to make your life difficult). Or build something yourself without select.
This is possible, however it is not fully supported. Here is a sample:
html
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
jquery
$("#selectId>option").click(function(){
alert(this.value);
});
here is a mediocre approach to handle ie:
<div id="dropdownWrapper">
<select id="selectId">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
</div>
js
var clickCount_guid324fF = 0;
$("#dropdownWrapper").click(function(){
if(++clickCount_guid324fF % 2 == 0){
alert($("#selectId").val());
clickCount_guid324fF = 0;
}
});
Wouldn't click work? .bind('click',function() { ...})
I once did this using mouseup, and checked where the event originated. If it was an option element, i handled the select. No listening on onchange at all:
<body>
<select id="select0">
<option value="0">option 0</option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<script type="text/javascript">
$('#select0').bind('mouseup', function (e) {
var src = e.target;
if (src.nodeName.toLowerCase()==='option') {
doMagicOnSelect(this);
}
});
function doMagicOnSelect(selectElem) {
console.log('current value:'+selectElem.value);
}
</script>
</body>
There is no reliable event fired when a selected option is re-chosen.
Whilst on some browsers you can catch events originating from an <option> (which you could use to trap click and keyboard events if you had the patience to try to reproduce a browser's select handling), this is unstandardised and doesn't work in IE (as it uses native Windows widgets to implement select boxes, which don't give that kind of granular access).
If you need to be able to re-fire an event when the same option is chosen again, what you have doesn't really sound like a select box to me; it could perhaps be better replaced with a scripted pop-up div full of buttons. (There are plenty of scripts that will substitute a select box for a scripted div to give you greater control on browsers where JavaScript is available.)
bind the change AND click event
$select.bind("change click", function (event) { // do something });

Categories

Resources