How to trigger select change event from custom placeholder - javascript

I have custom placeholder above select control. but the click event is not triggering when I click the custom placeholder, please suggest the best way to achive the select event, with out using jquery.
Please check the code
<div id='placeholder' style='font-size:10px; dispaly:none;background-color:red;position:absolute;left:10px'>
Options
</div>
<select id='selectcontrol' style='background-color:yellow; height:40px'>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>

You can wrap your select and placeholder div with another div.
Make select's background transparent
Make sure that your placeholder div is below the select using position:absolute for both of the elements
<div style="background-color:yellow;height:40px;width:100px">
<div id='placeholder' style='font-size:10px;background-color:red;position:absolute;left:10px'>
Options
</div>
<select id='selectcontrol' style='background-color:transparent; height:inherit;width:inherit;position:absolute;'>
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>
</div>

Related

How to apply tooltip to option tag which already exists for the parent select tag in JSP?

I am working on an application where there are several select tags. I know how to apply tooltip on option tag but it will take a lot of time. Is there a way i can allot the tooltip allotted to select tag to be allotted to the below option tags?
<select tittle="Select Box" multiple="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select>
Apply the title to a div and add select inside that div without title.
<div tittle="Select Box">
<select multiple="true">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option></select></div>

Showing Trademark (TM) in select dropdown option under select tag

I have the following simple select tag with few options, I would like add trademark (TM) in option value in upper position of title but <sup> tag is not changing anything.
What are the other way to display TM in upper position of options?
<select>
<option>Option Value TM</option>
<option>Option Value</option>
<option>Option Value</option>
<option>Option Value</option>
<option>Option Value</option>
</select>
Just use ascii ™ mark or ™ as html
<select>
<option>Option Value ™</option>
<option>Option Value ™</option>
<option>Option Value</option>
<option>Option Value</option>
<option>Option Value</option>
</select>

Change option background color for individual select2 boxes?

I have used select2 plugin. I need to add the new class in
.select2-results .select2-highlighted class for override the background color.
Can anyone please tell me the solution.
You want to color different select2 boxes different colors. select2 actually makes this a bit difficult because of the format of the generated html and the way it is added to your document:
From the Docs:
By default, Select2 will attach the dropdown to the end of the body and will absolutely position it to appear below the selection container.
When the dropdown is attached to the body, you are not limited to just displaying the dropdown below the container. Select2 will display above the container if there is not enough space below the container, but there is enough space above it. You are also not limited to displaying the dropdown within the parent container, which means Select2 will render correctly inside of modals and other small containers.
This apparently helps select2 work better in modals and such but it bones you because the "parent" element doesn't mean jack now,....ie - styling descendants of the original select's parent wont help you.
However, the dropdownParent option lets you specify where the generated html should be added...so we can work with that instead.
The basic idea is to add a data-select2-container="" attribute to each select whose select2 counterpart should be colored differently. The code will then create an div with the class specified in the attribute and add it after the original select then append the select2 box as a child of that added div thus allowing you to style the elements as children of a div with the specified class:
$(function () {
$(".select2").each(function(i,e){
$this = $(e);
if($this.data('select2-container')){
// if a container was specified as a data attribute, create that container and add it after the current raw select element
// the value set for `data-select2-container` will be used as the class for the container
$('<div class="'+$this.data('select2-container')+'"></div').insertAfter($this);
$this.select2({
placeholder: 'Select an option...',
dropdownParent:$this.next() // set the parent for the generated html to the element we created
});
}
else $this.select2({ placeholder: 'Select an option...'}); // handel cases where a container was not specified
});
});
.orange .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: orange;
}
.red .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: red;
}
.green .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://select2.github.io/dist/css/select2.min.css" rel="stylesheet"/>
<script src="https://select2.github.io/dist/js/select2.full.js"></script>
<div class="container1">
<select class="select2" data-select2-container="orange">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select><br>
<div class="container2">
<select class="select2" data-select2-container="green">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select><br>
<select class="select2" data-select2-container="red">
<option></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
</select>
</div>
</div>
<br>
Important notes:
This code will only work if you are using the full version of select2 4.0.0 (and the CSS to go with it )
Elements added like this may not function as expected if they are in a modal (judging by the comments in the docs, not tested)
This is one of those cases where I might would just download the plugin and edit it so that it has this functionality natively, I cant image why the author didnt include an option for this...

Onchange action dropdownlist

When I change the dropdown value, nothing happens?
Is there something wrong with this?
<option value='8' onchange="window.open('availability.jsp?user=99&clickeddate=2013-04-12&month=8','_self')">September</option><
Onchange is the correct action?
Regards
The onChange event is associated with the <select> tag and not with the <option> tag.
Try
<select onChange="window.open('availability.jsp?user=99&clickeddate=2013-04-12&month=8','_self')">
<option>option 1</option>
<option>option 2</option>
</select>
This is because the onchange event needs to be in the parent select element.

Setting conditional javascript for web form dropdown menu?

I have a web form that I'm applying both client and server side validation to and on this one text input field I'm looking for some way to have conditional code that sets a character limit based on what a dropdown menu is set to.
For example:
If Option 3 is selected, limit maximum character limit to 10.
<select>
<option>Option 1</option>
<option> Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
<label>Text Field</label>
<input type="text" />
I've been experimenting with a number of pre-coded javascript / jquery validation scripts and they all work fine except when it comes to this particular need.
How can this be done?
Thanks for any advice.
Create a select onchange event that will set the maxLength of the input. You can use the option value as the value for the event. Example:
<select id="sel" onchange="document.getElementById('txt').maxLength = document.getElementById('sel').value;" >
<option value="3">Option 1</option>
<option value="5"> Option 2</option>
<option value="10">Option 3</option>
<option value="20">Option 4</option>
</select>
<br/>
<label>Text Field</label>
<input type="text" id="txt" value="" maxlength="3" />
You can test it here - http://jsfiddle.net/codefuze/R7RtJ/

Categories

Resources