I want to show all the contents of select element (for below snippet) on focus when navigating to it using tab key.
select {
width: 200px;
border: 1px solid #aaa;
border-radius: 4px;
height: 28px;
overflow: hidden;
}
<select id="" class="select2" >
<option value="" disabled selected>Select Fruit</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
A solution I've found in jQuery but I want the same function in plain JavaScript which I'm not able to do.
jQuery code :-
$('.select2').select2({
minimumResultsForSearch: 20
});
$(document).on('focus', '.select2.select2-container', function (e) {
var isOriginalEvent = e.originalEvent
var isSingleSelect = $(this).find(".select2-selection--single").length > 0
if (isOriginalEvent && isSingleSelect) {
$(this).siblings('select:enabled').select2('open');
}
});
Try something like
<select id="select2" class="select2" >
<option value="" disabled selected>Select Fruit</option>
<option value="1">Apple</option>
<option value="2">Banana</option>
</select>
document.getElementById("select2").addEventListener("focus", myFunction);
function myFunction() {
var e = document.getElementById("select2");
console.log(e.options[e.selectedIndex].value);
}
Related
I am trying to add a placeholder image in the paragraph tag. The users select an option and the photo is replaced by the one chosen. I have tried to add a photo as a valued on the first option but didn't work. Any ideas please?
select { outline: none; width: 100%; padding: 10px 0; text-align: center;}
<select onchange="document.getElementById('preview2').src = this.value">
<option selected="selected" disabled="disabled">Select a finish</option>
<option value="/images/image1.jpeg">Chrome</option>
<option value="/images/image2.jpeg">Satin Chrome</option>
<option value="/images/image3.jpeg">Black</option>
<option value="/images/image5.jpeg" ">Brushed Brass</option>
<option value="/images/image6.jpeg "">Brushed Nickel</option>
<option value="/images/image7.jpeg" ">Powdercoated Gun Metal</option>
<option value="/images/image8.jpeg "">Gun Metal</option>
<option value="/images/image9.jpeg" ">Antique Brass</option>
<option value="/images/image10.jpeg "">Black Chrome</option>
</select><br />
<p><img id="preview2" alt="" /></p>
Just trigger the change and have the default on the first option:
window.addEventListener("DOMContentLoaded", () => { // when the page haas loaded
const sel = document.getElementById("imgSel");
const img = document.getElementById('preview2');
const changeImg = () => { // called when image needs to be changed
img.src = sel.value;
img.title = sel.value;
console.log(img.src); // for debugging
};
sel.addEventListener("change", changeImg); // better than inline event handler
changeImg(); // initialise
})
#imgSel {
outline: none;
width: 100%;
padding: 10px 0;
text-align: center;
}
img {
height: 100px;
width: 100px;
border: 1px solid black;
}
<select id="imgSel">
<option selected="selected" disabled="disabled" value="/images/default.jpg">Select a finish</option>
<option value="/images/image1.jpeg">Chrome</option>
<option value="/images/image2.jpeg">Satin Chrome</option>
<option value="/images/image3.jpeg">Black</option>
<option value="/images/image5.jpeg">Brushed Brass</option>
<option value="/images/image6.jpeg">Brushed Nickel</option>
<option value="/images/image7.jpeg">Powdercoated Gun Metal</option>
<option value="/images/image8.jpeg">Gun Metal</option>
<option value="/images/image9.jpeg">Antique Brass</option>
<option value="/images/image10.jpeg">Black Chrome</option>
</select><br />
<p><img id="preview2" alt="" /></p>
How can I prevent browser from scrolling when focusing? Here's my code:
select {
width: 200px;
height: 55em;
overflow: auto;
}
<br><br><br><br><br><br><br><br><br>
<select multiple>
<option selected="">Lorem</option>
<option selected="">ipsum</option>
<option selected="">dolor</option>
<option selected="">sit</option>
<option selected="">amet</option>
<option selected="">Lorem</option>
<option selected="">ipsum</option>
<option selected="">dolor</option>
<option selected="">sit</option>
<option selected="">amet</option>
</select>
Try choosing an option or two.
UPDATED
As your requirement, I'd suggest you use position: fixed for the temporary body block (removed immediately with setTimeout)
With this solution, onfocus is good enough (no need to have onblur)
function blockScroller(event) {
const body = document.getElementsByTagName("body")[0]
body.classList.add("scroller-blocker")
setTimeout(() => {
body.classList.remove("scroller-blocker")
})
}
select {
width: 200px;
height: 55em;
overflow: auto;
}
.scroller-blocker {
position: fixed;
height: 100%;
}
<br><br><br><br><br><br><br><br><br>
<select multiple onfocus="blockScroller(event)">
<option selected="">Lorem</option>
<option selected="">ipsum</option>
<option selected="">dolor</option>
<option selected="">sit</option>
<option selected="">amet</option>
<option selected="">Lorem</option>
<option selected="">ipsum</option>
<option selected="">dolor</option>
<option selected="">sit</option>
<option selected="">amet</option>
</select>
OLD ANSWER
You can block the scroller with overflow: hidden on your element body
onfocus is triggered whenever an user focuses on a element
onblur is triggered whenever an user clicks outside of a focused element
Note that for mobile devices, you need to remove touchmove event for completely blocking screen moving
const touchMoveEvent = function(e) {
e.preventDefault()
}
function blockScroller() {
const body = document.getElementsByTagName("body")[0]
body.classList.add("scroller-blocker")
//avoid touch move event on mobile
body.addEventListener('touchmove', touchMoveEvent)
}
function unblockScroller() {
const body = document.getElementsByTagName("body")[0]
body.classList.remove("scroller-blocker")
//put the default behaviour of touch move event back
body.removeEventListener('touchmove', touchMoveEvent)
}
select {
width: 200px;
height: 55em;
overflow: auto;
}
.scroller-blocker {
height: 100%;
overflow: hidden;
}
<br><br><br><br><br><br><br><br><br>
<select multiple onfocus="blockScroller()" onblur="unblockScroller()">
<option selected="">Lorem</option>
<option selected="">ipsum</option>
<option selected="">dolor</option>
<option selected="">sit</option>
<option selected="">amet</option>
<option selected="">Lorem</option>
<option selected="">ipsum</option>
<option selected="">dolor</option>
<option selected="">sit</option>
<option selected="">amet</option>
</select>
I have a drop down list of options which lets my users choose one of a few options. But I want to also include a button that when pressed will select a specific option out of the dropdown list.
This is working but the issue is that the dropdown list isnt showing the updated selection, but if you click on the dropdown list you can see that the selection the button chose is highlighted and is indeed selected.
function onclick() {
document.form.server_select.value = 'Quebec';
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onclick="onclick()">Button</button>
When you load the page the first option is displayed in the drop down to the user as seen
and
After pressing the button the dropdown still shows the first option in the list but when clicking onto the dropdown you can see a different option is selected.
I expected the dropdown to also show the new selection.
The code works as expected:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
<form>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</form>
<button onclick="change()">Button</button>
But looking at the screenshots, it looks like they are doing a custom dropdown, basically you are clicking on a transparent select, and they are updating their pretty dropdown manually, something like this:
function change() {
document.getElementById('server_select').value = 'Quebec';
}
function change2() {
element = document.getElementById('server_select')
element.value = 'Quebec';
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('change', true, true, window);
element.dispatchEvent(event);
}
function open() {
document.getElementById('server_select').value = 'Quebec';
}
document.getElementById('server_select').addEventListener('change', function(event) {
document.getElementById('value').innerHTML = event.target.value
})
#dropdown {
position: relative;
}
#server_select {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<form>
<div id="dropdown">
<span id="value">Auto Select</span>
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
</div>
</form>
<button onclick="change()">Button</button>
<button onclick="change2()">Button Fixed</button>
You'll have to look at the actual HTML structure of your document to see what you need to update, but use the Button Fixed example to see (basically) what you need to do.
You should avoid using reserved words such as onclick as function name
for list of reserved words please look into https://www.w3schools.com/js/js_reserved.asp
function change() {
document.getElementById("server_select").value = "Quebec";
}
<select name="server_select" id="server_select">
<option value="random" selected>Auto Select</option>
<option value="Quebec">Quebec</option>
<option value="NewYork">NewYork</option>
<option value="Seattle">Seattle</option>
<option value="France">France</option>
</select>
<button onClick="change()">Button</button>
<script>
</script>
I have a div "businessmodel" with some html element inside that is hidden by default and I want it to display when the option selected in the select option "accounttype" is provider.
Please see the code here:
JavaScript
<script type="text/javascript">
$('#accounttype').bind('change', function(event) {
var i= $('#accounttype').val();
if(i=="0")
{
$('#businessmodel').hide();
}
elseif(i=="1")
{
$('#businessmodel').show();
}
});
</script>
HTML
Account Type
<select name="type" required="" class='selector' id="accounttype" onchange="change(this)">
<option value='0'>User</option>
<option value='1'>Provider</option>
</select>
<div id="businessmodel" style="display:none;">
<p id="modellevel" >Business model</p>
<select name="model" required="" class='selector' id="model">
<option value='choose' >Choose Business Model</option>
<option value='ALPHA' >ALPHA</option>
<option value='Thecla'>Thecla</option>
<option value='Sixtus'>Sixtus</option>
<option value='Marthar'>Marthar</option>
<option value='Alma' >Alma</option>
<option value='Manuel'>Manuel</option>
<option value='Dum'>Dum</option>
<option value='Gech'>Gech</option>
<option value='Alba'>Hika</option>
<option value='Win'>Win</option>
<option value='Rex'>Rex</option>
<option value='Hika'>Hika</option>
</select>
</div>
Try this
<script type="text/javascript">
$(document).ready(function() {
$('select').change(function () {
$('.business').toggleClass('hide');
});
});
</script>
<style type="text/css">
.accounttype {
border: 1px solid;
margin: 5px;
padding: 10px;
}
.business {
border: 1px solid;
margin: 5px;
padding: 10px;
}
.hide {
display: none;
}
</style>
<div class="accounttype">
Show business model :
<select>
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</div>
<div class="business hide">
Some content goes here
</div>
Try this code.
$('#accounttype').on('change', function() {
var i = this.value;
if(i=="0")
{
$('#businessmodel').hide();
}
else
{
$('#businessmodel').show();
}
}
<select name="type" required="" class='selector' id="accounttype">
<option value='0'>User</option>
<option value='1'>Provider</option>
</select>
<div id="businessmodel" >
<p id="modellevel" >Business model</p>
<select name="model" required="" class='selector' id="model">
<option value='choose' >Choose Business Model</option>
<option value='ALPHA' >ALPHA</option>
<option value='Thecla'>Thecla</option>
<option value='Sixtus'>Sixtus</option>
<option value='Marthar'>Marthar</option>
<option value='Alma' >Alma</option>
<option value='Manuel'>Manuel</option>
<option value='Dum'>Dum</option>
<option value='Gech'>Gech</option>
<option value='Alba'>Hika</option>
<option value='Win'>Win</option>
<option value='Rex'>Rex</option>
<option value='Hika'>Hika</option>
</select>
</div>
$('#accounttype').on('change', function(event) {
var i= $('#accounttype').val();
if(i=="0")
{
$('#businessmodel').hide();
}
else
{
$('#businessmodel').show();
}
});
I have an HTML select element with some options inside:
<select class = "myRed" id="mySelect" onchange="onSelectChange()">
<option selected value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
I would like the text color of the select object to be red when its value is 0, black otherwise. I could be able to do this through JavaScript:
function onSelectChange(){
if (document.getElementById('mySelect').value == 0){
document.getElementById('mySelect').className = 'myRed';
} else {
document.getElementById('mySelect').className = 'myBlack'
}
}
where
.myRed{color:red;}
and
.myBlack{color:black;}
However, I've been told this is somehow reachable through CSS only, without using JavaScript. I cannot think about any other way than using JS. Could anyone please advise?
You can use required and assign empty value to the first option:
<select class="mySelect" required>
<option value="">0</option>
<option value="1">1</option>
</select>
css:
.mySelect { font-size: 2em; }
.mySelect option { color: green; }
.mySelect option[value=""] { color: red; }
.mySelect:invalid { color: red; }
Check fiddle
If you're looking for something simple, you can always do it this way:
.css
.myRed{color:red;}
.myBlack{color:black;}
.html
<select class = "myRed" id="mySelect">
<option selected value="0" class="myRed">0</option>
<option value="1" class="myBlack">1</option>
<option value="2" class="myBlack">2</option>
</select>
http://codepen.io/anon/pen/yyPKoM