Jquery toggle class on select when selecting the placeholder option - javascript

I am very new on JQuery, and despite my research and workarounds, i don't find out the right way to code what I want to achieve here.
So, here's the situation. I have a dropdown list like this:
<select name="your-country" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false">
<option value="">Your Country*</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Switzerland">Switzerland</option>
</select>
I want my dropdown list to be grey whenever the first placeholder "Your Country*" option is selected, and black when another option is selected.
select{
color: #000;
}
select.my-placeholder{
color: #666 !important;
}
I want to create a simple jquery block of code that adds the class .my-placeholder whenever the first option (with no value) is selected, and discard it whenever another option is selected. (I want no change in the HTML code)
How can I achieve that ?
Thank you

You can create a function which will respond to change event and selection check the value and add corresponding class
function updateColor() {
let getSelectedValue = $('select[name="your-country"]').val();
if (getSelectedValue === "") {
$('select[name="your-country"]').find('option').addClass('my-placeholder');
} else {
$('select[name="your-country"]').find('option').removeClass('my-placeholder').addClass('select');
}
}
.select {
color: red;
}
.my-placeholder {
color: #666;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="your-country" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" aria-required="true" aria-invalid="false" onchange="updateColor()">
<option value="">Your Country*</option>
<option value="France">France</option>
<option value="Belgium">Belgium</option>
<option value="Switzerland">Switzerland</option>
</select>

Related

popup to display selected options using javascript or ajax

i have a HTML code in which user can select multiple options. As the user is selcting options, the selected options should be displayed in either a popup using ajax or a div...I have already tried using selectbox with checkbox but that doesn't work and it became difficult to fetch parameters for further usage in perl cgi script. There is no code available for this..What is the easy way to get the selected options in a popup? i want the options to be displayed in the popup as they are getting selected.
HTML code:
<td>Server Name <font color = red>*</font></td>
<td>
<span title="Press the 'ctrl' key to select multiple servers">
<select name="serverlist" id="slist" size="4" multiple>
<option value="" disabled selected>Select servers</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</span>
</td>
You can easily get the selected options.
You need to add onchange event first, and loop the options and get the selected values. Something like this:
<td>Server Name
<font color = red>*</font>
</td>
<td>
<span title="Press the 'ctrl' key to select multiple servers">
<select name="serverlist" id="slist" onChange="getSelectedServers()" size="4" multiple>
<option value="" disabled selected>Select servers</option>
<option>Server 1</option>
<option>Server 2</option>
<option>Server 3</option>
<option>Server 4</option>
<option>Server 5</option>
</select>
</span>
</td>
<div id="displaySelectedServers">
</div>
<script>
function getSelectedServers() {
var e = document.getElementById("slist");
var serversList = '';
for(var i = 0; i < e.options.length; i++) {
if (e.options[i].selected) {
serversList += '| ' + e.options[i].value + ' |';
}
}
document.getElementById("displaySelectedServers").innerHTML = serversList;
}
</script>
I hope my answer was helpful :)
Additional html for pop up div:
<div id=popUp>
</div>
addition CSS for popUp div:
#popUp{
display: none; // required if div is to "pop up" on change.
border: 1px solid black; // optional, put it here to give an idea on how to approach working with this div.
border-radius:4px; // optional
width:200px; // optional
min-height: 100px; // optional
}
#popUp>p{
display: inline-block; // optional
margin: 5px; // optional
}
and the jQuery to listen to changes in the select element iterate through the options to review which are selected and display the text content of those also in the pop up div:
$("select#slist").change(function(){ // Listen to <select> changes
$("div#popUp").show().empty(); // Make sure popUp is shown and cleared of contents.
$(this).find("option").each(function(index, value){ // Find options, iterate through them
if($(value).prop("selected")){ // check if option is selected
$("div#popUp").append(`<p>${$(value).text()}</p>`) // append option text content to popUp
}
});
});

Jquery not showing select element. No errors in console

I have a "state" select and a few "carrier" selects. for simplicity I'm using only two carrier selects here.
My jquery is suppose to show the carrier selects based on the the state selected.
The state select value is appended to the carrier select name so I can choose which carrier select to add a specific class to.
MY PROBLEM: My carrier selects wont show up. I had this working at one point, and I must've changed something along the way. Not sure whats happening here. Any help would be great. Thanks!
EDIT: I've added my original JS to show where I was, and how I want to change to Jquery.
HTML:
<div style="width:160px;">
<select name="state_select" id="state_select">
<option value="0" selected>Choose a state</option>
<option value="1">Connecticut</option>
<option value="2">New Hampshire</option>
<option value="3">New Jersey</option>
<option value="4">New York</option>
</select>
</div>
<div id="select-div1" class="select-div">
<select name="carrier_select" id="carrier_select1" class="carrier_select">
<option selected disabled>Select a carrier - Conn</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
<div id="select-div" class="select-div">
<select name="carrier_select" id="carrier_select2" class="carrier_select">
<option selected disabled>Select a carrier - NH</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
JQUERY:
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('div.select-div select').val();
selectDiv = $('#carrier_select')[0] + stateVal;
if ($(stateVal).attr('selected', 'selected')) {
$(selectDiv).attr('class', "conn_select", "nh_select", "nj_select", "ny_select");
$(selectDiv).addClass("dropdown-box");
} else {
$(selectDiv).attr('class', 'carrier_select');
}
}
$('#state_select').change(function(e) {
$('.carrier_select').prop('selectedIndex', 0);
optionCheck();
});
MY JAVASCRIPT (WORKS) BEFORE TRYING JQUERY:
function optionCheck() {
var i, len, optionVal, selectDiv,
selectOptions = document.getElementById("state_select");
// loop through the options in case there
// are multiple selected values
for (i = 0, len = selectOptions.options.length; i < len; i++) {
// get the selected option value
optionVal = selectOptions.options[i].value;
// find the corresponding help div
selectDiv = document.getElementById("carrier_select" + optionVal);
// move on if I didn't find one
if (!selectDiv) { continue; }
// set CSS classes to show/hide help div
if (selectOptions.options[i].selected) {
selectDiv.className = "conn_select nh_select nj_select ny_select";
$(selectDiv).addClass("dropdown-box");
} else {
//Hide carrier select on page load
selectDiv.className = "carrier_select";
}
}
}
// bind the onchange handler
document.getElementById("state_select").onchange = optionCheck;
CSS:
.select-div select {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.carrier_select {
display: none;
}
First off, your code has some redundancies and some questionable decisions in it in my humble opinion that you could work around in order to simplify and/or make it more usable. However, there is a way to achieve what you want with most of it untouched, using Javascript/jQuery code. For the full thing, check this fiddle, the script is below as well along with its explanation:
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('#state_select').val();
selectDiv = $('#carrier_select'+ stateVal);
$('.dropdown-box:not(#state_select_box)').removeClass('dropdown-box').addClass('carrier_select');
$(selectDiv).removeClass('carrier_select').addClass('dropdown-box');
$($selectDiv).val('0');
}
$('#state_select').change(function(e) {
optionCheck();
});
What this does is it gets the val() of #state_select, appends it to the #carrier_select so that the selector targets the right id, then changes all active selectors, except the #state_selector_box (which I made to wrap around #state_select) to ones with the .carrier_select class, thus making them invisible and then it finally makes the one that corresponds to the selected state visible using the dropdown-box class. Also the val() of the selector that just appeared is set to 0.
You are telling css to hide the element
.carrier_select {
display: none;
}
Both of your select elements have the class "carrier_select" and as a result of this css definition, they are not displayed. Remove or change this definition for them to be shown.
Edited in such a way that you can see the carrier selections. But other part of your question - appending to carrier name, showing carriers depending on the state needs more inputs.
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('div.select-div select').val();
selectDiv = $('#carrier_select')[0] + stateVal;
if ($(stateVal).attr('selected', 'selected')) {
$(selectDiv).attr('class', "conn_select", "nh_select", "nj_select", "ny_select");
$(selectDiv).addClass("dropdown-box");
} else {
$(selectDiv).attr('class', 'carrier_select');
}
}
$('#state_select').change(function(e) {
$('.carrier_select').prop('selectedIndex', 0);
optionCheck();
});
.select-div select {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="dropdown-box" style="width:160px;">
<select name="state_select" id="state_select">
<option value="0" selected>Choose a state</option>
<option value="1">Connecticut</option>
<option value="2">New Hampshire</option>
<option value="3">New Jersey</option>
<option value="4">New York</option>
</select>
</div>
<div id="select-div1" class="select-div">
<select name="carrier_select" id="carrier_select1" class="carrier_select">
<option selected disabled>Select a carrier - Conn</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
<div id="select-div" class="select-div">
<select name="carrier_select" id="carrier_select2" class="carrier_select">
<option selected disabled>Select a carrier - NH</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
Without commenting on the rest of the code, try removing
.carrier_select {
display: none;
}

Change select background colour when a non disabled option is selected

looking for a way to change the colour of a select box if one of the disabled options is not selected.
So this is the example drop down:
<select class="selectoption" name="desc[]">
<option disabled="disabled" selected="selected">Select option...</option>
<option value="1">Option 1</option>
</select>
How can i change the background colour of this select box, if the disbaled option is not selected.
So the back ground colour is #333 currently, once a user selects an option it is changed to another colour.
i already am doing something similiar using checkboxes. But i am able to use the
checkbox:checked
Thanks in advance!
If there's no problem in using javascript, you can check for the selected option that has a value.
HTML:
<select id="sel1" class="selectoption" name="desc[]">
<option disabled="disabled" selected="selected">Select option...</option>
<option value="1">Option 1</option>
</select>
JavaScript:
document.getElementById("sel1").onchange = function() {
if(this.value != null && this.value != undefined)
{
this.className = "myclass";
}
};
CSS:
select.myclass
{
background-color: red;
}
http://jsfiddle.net/AWMaa/

Adding validation to an HTML select box

I want to make one simple validation check on my HTML form. I'd like it so that if the user chooses the 18 - 24, an error appears next to the drop down select: 'You must be 25+'.
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
I've tried adding both a class and ID to value 1. Then I tried something like:
function hidestuff(page){
document.getElementById(error).style.visibility="hidden";
}
function showstuff(error){
document.getElementById(error).style.visibility="visible";
}
Attempting to toggle show and hide with JavaScript. Hoping something like if on page ID hide this message, when error div toggled display. But this didn't work. I did add the corresponding CSS too. Any pointers on how to write this correctly?
Something like this can be achieved with a bit of jQuery:
Here's a JSFiddle
jQuery:
$(document).ready(function() {
$('#errorMsg').hide(); //ensure the error message is hidden
$('#element_3').on('change',function() {
// any option that has the class "error" will cause the error msg to be
// displayed (just in case you feel like adding a 0-17 option later)
// To target an element by ID, use $(this).find(":selected").attr('id') == 'error'
if ($(this).find(":selected").hasClass('error')) {
$('#errorMsg').show();
} else {
$('#errorMsg').hide();
}
});
});
and a bit of HTML:
<select class="element select medium" id="element_3" name="element_3">
<option value="" selected="selected"></option>
<option value="1" class="error" id="error">18 - 24</option>
<option value="2" >25 - 34</option>
<option value="3" >35 - 44</option>
<option value="4" >45 +</option>
</select>
<div id="errorMsg">You must be over 25</div>
and why not style it up with some CSS:
#errorMsg {
display: inline-block;
background-color: #fdd;
font: 12pt arial;
color: #f00;
padding: 2px 5px 2px 5px;
border: 1px solid #f00;
border-radius: 5px;
width: 200px;
}
I think what you must be doing is something like this
<select id="myselect" onchange="check();">
<option value="0">Select option</option>
<option value="1">op1</option>
<option value="2">op3</option>
</select>
<div id="error" style="display:none;">Error mesage</div>
<div id="page" style="width:100px;height:100px;border:1px solid black;display:none;">my page</div>
<script>
function check() {
switch (parseInt($('#myselect').val())) {
case 0:
$('#error').show();
$('#page').hide();
break;
case 1:
$('#error').show();
$('#page').hide();
break;
case 2:
$('#error').hide();
$('#page').show();
break;
}
}
</script>
http://jsfiddle.net/SS3gc/4/

A Placeholder for the `select` tag?

I'm wondering how to achieve the placeholder effect with the select tag, it would be really nice to have the default selected option something like "Please Chose an Option:".
I have tried some variations and they are not working so far and I'm sure that it can be achieved cause i seen it somewhere (can't remember where).
I have tried this:
1)
<fieldset>
<select data-placeholder="Please select a product" id="s1" class="global">
<option value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
2)
<fieldset>
<select id="s1" class="global">
<option data-placeholder="true" value="Some">Some</option>
<option value="Slower">Slower</option>
<option value="Slow">Slow</option>
<option value="Fast">Fast</option>
<option value="Faster">Faster</option>
</select>
</fieldset>
Both are not working, maybe there is a jQuery method to make that?
Quick edit: I DON'T want to just disable one of the options and make it selected because it will still be showed in the drop-down list with the other items.
Here's two types of placeholder, re-selectable and hidden:
Demo: http://jsfiddle.net/lachlan/FuNmc/
Re-selectable placeholder:
<select>
<option value="" selected>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
Hidden placeholder:
<select class="empty">
<option value="" selected disabled>Please select</option>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
CSS to change the colour of the first item:
select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }
And a little jQuery to toggle the font-color after selection:
// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
$(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');
Inspiration:
https://stackoverflow.com/a/5805194/1196148 - re-selectable placeholder
https://stackoverflow.com/a/8442831/1196148 - hidden placeholder
I've built a simple demo by following #Truth suggestion: http://jsfiddle.net/6QnXF/
(function($){
$('#myAwesomeSelect').change(function(){
if( !$(this).data('removedPlaceHolder'))
{
$(this).find('option:first').remove();
$(this).data('removedPlaceHolder', true);
}
});
})(jQuery);
I hope it works for you.
As far as I know, there's no way doing it with HTML alone (though that would be nice.)
You can fake it with a selected option (I know you don't want it, but it's probably the only way). Once another option is selected, you can remove it.
Here's a working example of what I describe.
My guess is that you're going to have to construct your own workaround for a select box. Something like a series of divs that act as options which when clicked are shown and have their value inserted into a hidden input field.

Categories