We Keep Coding

Is it possible to style a (must be dropdown list/select option, not checkbox/radio button) options to box/div?

Here is the aspect i want to make, each box represent each option
<label for="product">Choose:</label>
<select name="product" id="product">
<option value="70A">Volvo</option>
<option value="70B">Saab</option>
<option value="70C">Mercedes</option>
<option value="75A">Audi</option>
</select>
Is it possible to do that?

You need to make divs with each() from all your select options.
Then you get the click on them and change the value of your hidden select.
Edit : i commented my code.
// lets make divs options for the select
customSelect("selectOne", "customSelectOne", 1);
customSelect("selectTwo", "customSelectTwo", 0);
// get the click for each options created
$(document).on("click",".selectOption", function (event) {
// first, we remove class for each option div
$(this).parent("div:first").find('.selectOption').removeClass('checked');
const getOptionID = $(this).data('optionid'); // get value of data optionid
$(this).toggleClass('checked'); // add/remove checked class
// change value of hiddent select
$(this).parent("div:first").prevAll('select:first').val(getOptionID).change();
});
$('.hideShowSelect').click(function() {
$('select').toggle();
});
/*
loop that make reproduce options of your select
#select : selector of the select
#div : selector of the div that will contain the divs for each option
#checked : 1 to make first div checked or 0 to not
*/
function customSelect(select, div, checked) {
// we loop each option
$('select[name="' + select + '"] option').each(function(index) {
// check if need to add checked class if index is equal to 0 and checked equal to 1
const checkFirstOption = (index === 0 && checked === 1 ? ' checked' : '');
const optionVal = $(this).val(); // get option value
// create a div for the option with data value with option value
$('.' + div).append('<div class="selectOption'+ checkFirstOption +'" data-optionid="' + optionVal + '">' + optionVal + '</div>');
});
}
#myform {
max-width:450px;
margin-top:25px;
}
#myform select {
display:none;
}
#myform .selectOption {
color:#141414;
cursor:pointer;
display: inline-block;
border: 1px solid #bebebe;
padding:15px 17.5px;
border-radius:2.5px;
margin:5px;
transition: all 0.3s ease-out;
}
#myform .selectOption.checked {
border: 1px solid #111;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<select name="selectOne">
<option value="70A">70A</option>
<option value="70B">70B</option>
<option value="70C">70C</option>
<option value="75A">75A</option>
<option value="75B">75B</option>
<option value="75C">75C</option>
</select>
<div class="customSelectOne"></div>
<select name="selectTwo">
<option value="80B">80B</option>
<option value="80C">80C</option>
<option value="80D">80D</option>
<option value="85B">85B</option>
<option value="85C">85C</option>
<option value="85D">85D</option>
</select>
<div class="customSelectTwo"></div>
</form>
<p>Hide / show select</p>

not working event change on select for multiple classname

I have a page that multiple selects.
When the option of some of them is clicked (value=0), a text box should be opened in order for the user to write her description in it.
I want the same text box to be closed when the user clicks on any part of the page except the text box.
I want the text box to close automatically when the user goes to the before or next selector.
Event click not working on the options of select.
but this code not working.
If you have a suggestion for solving this problem, thank you for letting me know
Thank you in advance for your cooperation.
function changeFunc(){
var selectBox = document.querySelectorAll(".selectBox");
var selectedValue = selectBox.value;
var description = document.querySelectorAll('.description');
var i;
for (i = 0; i < selectBox.length; i++) {
selectBox[i].addEventListener('click', function(){
if(selectedValue == '0'){
selectBox[i].classList.add('active');
description[i].classList.add('show');
window.addEventListener("click", function(event){
var desText = document.querySelector('.description.show');
if (event.target !== desText) {
description.classList.remove('show');
}
});
}else{
selectBox[i].classList.remove('active');
description[i].classList.remove('show');
}
})
}
}
select{
width: 70%;
border:1px solid rgba(112, 112, 112, .5);
padding: 15px;
border-radius: 10px;
outline: none;
box-sizing: border-box;
}
select.active{
background: yellow;
color: white;
}
.description{
border: 2px solid red;
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 13.75%;
top: 85%;
z-index: 1;
display: none;
}
.line-form .description.show {
display: block;
}
<div>
<label for="example1">example1</label>
<select class="selectBox" name="whois" id="example1" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example1" cols="50" rows="3"> </textarea>
</div>
<div>
<label for="example2">example2</label>
<select class="selectBox" name="whois" id="example2" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example2" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example3">example3</label>
<select class="selectBox" name="whois" id="example3" required onchange="changeFunc();">
<option value="1" >No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup> </select>
<textarea class="description" name="example3" cols="50" rows="3"></textarea>
</div>

I made changes to your code and added a "show" class to css.
When "YES" is selected from the options menu, which has the value = 0, "textarea" is displayed. When you click on another menu with options or anywhere else "textarea" is hidden.
When clicked, the script places on the parent packaging DIV element class ".selected". When clicking on an element the script looks for the closest element with this class. In this case it is the parent element ... if it does not have the active class "textarea" it will be hidden.
Step-by-step description:
Get all elements with class .selectBox
Add listner for "click" and "change" events on all elements with class .selectBox. This events call the function "changeFunc()".
Add listner on the window -> if user click anywhere the script search for closest element with class .selected (In this case this must be a parent element). If it is not, it means that it has been clicked outside the selected element and the function that removes the classes of the active element "removeClasses()" should be called.
The function "changeFunc()" First removes activity classes from all items by calling the function "removeClasses()". Then gets as an argument which is the clicked element. And checks if its value is equal to "0" and if it sets the activity classes.
The function "removeClasses()" removes activity classes from all items
var selectBox = document.querySelectorAll(".selectBox");
selectBox.forEach(el => {
el.addEventListener('change', function () {
changeFunc(this);
});
el.addEventListener('click', function () {
changeFunc(this);
});
});
window.addEventListener("click", function (event) {
var closest = event.target.closest('.selected');
if (!closest) {
removeClasses();
}
});
function changeFunc(x) {
removeClasses();
if (x.value === '0') {
x.classList.add('active');
x.classList.add('show');
x.parentNode.querySelector('.description').classList.add('show');
x.closest('div').classList.add('selected');
}
}
function removeClasses() {
selectBox.forEach(el => {
el.classList.remove('active');
el.classList.remove('show');
el.parentNode.querySelector('.description').classList.remove('show');
el.closest('div').classList.remove('selected');
});
}
select {
width: 70%;
border: 1px solid rgba(112, 112, 112, .5);
padding: 15px;
border-radius: 10px;
outline: none;
box-sizing: border-box;
}
select.active {
background: yellow;
color: white;
}
.description {
border: 2px solid red;
background-color: #e6eef7;
border-radius: 10px;
outline: none;
position: absolute;
left: 13.75%;
top: 85%;
z-index: 1;
display: none;
}
.show {
display: block;
}
.line-form .description.show {
display: block;
}
<div>
<label for="example1">example1</label>
<select class="selectBox" name="whois" id="example1" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example1" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example2">example2</label>
<select class="selectBox" name="whois" id="example2" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example2" cols="50" rows="3"></textarea>
</div>
<div>
<label for="example3">example3</label>
<select class="selectBox" name="whois" id="example3" required>
<option value="1">No</option>
<optgroup label="Yes">
<option value="0">Explain more for yes</option>
</optgroup>
</select>
<textarea class="description" name="example3" cols="50" rows="3"></textarea>
</div>

Your code looks fine. The problem is in
var selectedValue = selectBox.value;
selectBox is a collection of nodes, so You cannot get direct value from there. You need to loop through.
In your loop you need to get selected value using selectBox[i].value
And 1 more problem I can see, you are adding click event listener to the window, in the loop
It is not performant. You should pull this out from the loop

Move items across between multiple select

I have two multi selects viz. mySelectNumberTest1 and mySelectNumberTest2. What I want to do is be able to select items in the first dropdown and when I click on a checkbox/button or any control that will trigger an event, it should take the options from mySelectNumberTest1 and populates it into mySelectNumberTest2.
I have followed this link: Get selected value in dropdown list using JavaScript? its a partial solution to my problem. The only thing that's missing is that if you select more than one item in mySelectNumberTest1 it will only take the first item and populate it into mySelectNumberTest2.
The below code only works when I am populating items from a select into a normal input textbox.
<select id="mySelectNumberTest1" name="mySelectNumberTest" multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<input type="checkbox" id="tickHereToMove" />
<input id="mySelectNumberTest2" name="mySelectNumberTest2" type="text" onchange="copyTextValueTest(this);" />
function copyTextValueTest(bf) {
var e = document.getElementById("mySelectNumberTest1");
var strUser = e.options[e.selectedIndex].text;
document.getElementById("mySelectNumberTest2").value = strUser;
alert(strUser);
}
There's also a few problems with this approach as it concatenates the text. I tried the .split() function and that still didn't give me the result I wanted. I want the selected items in each line on mySelectNumberTest2.
This library http://quasipartikel.at/multiselect/ does EXACTLY what I want to do. I am working in an Angular JS project and when I try include the jquery scripts in my index.html page, it causes anomalous behaviour and messes up the styling of the page as well.
So if I select 1 and 3 in mySelectNumberTest1, it should populate it in mySelectNumberTest2 in two different lines and not 12.
If this can be achieved in a drag and drop implementation I would also be happy.

Simply do this:
function addOptions( fromId, toId ) {
var fromEl = document.getElementById( fromId ),
toEl = document.getElementById( toId );
if ( fromEl.selectedIndex >= 0 ) {
var index = toEl.options.length;
for ( var i = 0; i < fromEl.options.length; i++ ) {
if ( fromEl.options[ i ].selected ) {
toEl.options[ index ] = fromEl.options[ i ];
i--;
index++
}
}
}
}
ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 70px 40px 70px;
grid-gap: 10px
}
select {
width: 70px
}
li.relative {
position: relative
}
#add {
position: absolute;
width: 40px;
font-size: 18px;
top: 0
}
#remove {
position: absolute;
width: 40px;
font-size: 18px;
bottom: 0
}
<ul>
<li>
<select id="select1" name="select1" multiple>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
<option>Item 4</option>
</select>
</li>
<li class="relative">
<input type="button" id="add" value="⇾" onclick="addOptions( 'select1', 'select2' )" />
<input type="button" id="remove" value="⇽" onclick="addOptions( 'select2', 'select1' )" />
</li>
<li>
<select id="select2" name="select2" multiple></select>
</li>
</ul>

javascript stops working when switching from text field to select

I'm trying to do javascript, but I'm a ruby guy and really suck with javascript. I have a one field form (text field and submit button) in which javascript only allows the form to be submitted if there is text in the field. However, I switched the field type from a text field to a select. Now, the form can't submit. I am almost certain the problem is with my javascript. Here is the code I have that word with a text field. How do I get it to work with the select?
Form:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<li>
<input id="resume-field" class="field field288" type="text"
value="Type a speciality you want to add to your profile"
title="Type a speciality you want to add to your profile"
name="skill[label]"></input>
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
Javascript:
(function($){
$(document).on('focusin', '#resume-field', function() {
$(this).parents().find('.button-add-disabled').removeClass('button-add-disabled');
}).on('focusout', '#resume-field', function(){
if(this.value==' '||this.title==this.value) {
$(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
$(this).parents().find('.button-add').removeClass('button-add-disabled');
}
});
$('.button-add-disabled').click(function(){
return !$(this).hasClass('button-add-disabled');
});
}(jQuery));
css:
.button-add { width: 49px; height: 28px; border: solid 1px #8c8c8c; display: block;
font-size: 11px; line-height: 28px ; color: #fff; text-align: center;
font-family: 'Ubuntu', sans-serif; transition: none; margin: 0 0 0 auto;
border-radius: 3px; }
.button-add:hover { text-decoration: none;
-webkit-transition:none;
-moz-transition:none;
-ms-transition:none;
-o-transition:none;
transition:none;
}
.button-add-disabled { background: url(/assets/add-specialities-disabled.png)
repeat-x 0 0; box-shadow: 0 0 0 0; margin-left:35px; }
.button-add-disabled:hover { background: url(/assets/add-specialities-disabled.png)
repeat-x 0 0; box-shadow: 0 0 0 0; }
Html for form with drop down:
<select id="resume-field" name="skill[label]">
<option value="1" title="option_1"></option>
<option value="2" title="option 2" selected="selected"></option>
</select>

I made a minimal example (jsfiddle), doing what I think you asked for, but not using your code. You can probably adapt it if it does what you want.
HTML
<form>
<select id="selectme">
<option value="">-- Please select one --</option>
<option value="1">1</option>
<option value="2">Two</option>
<option value="3">III</option>
</select>
<input type="submit" value="submit" id="clickme">
</form>
JS
$(function(){
$("#clickme").prop("disabled", true);
$("#selectme").change(function(){
if ($("#selectme").val() != "") {
$("#clickme").removeAttr("disabled");
} else {
$("#clickme").prop("disabled", true);
}
});
})
CSS
#clickme {
background-color: #f00;
}
#clickme:disabled {
background-color: #eee;
}

you stated that you have switched the input field type from text to select. Therefore you need to add this kind of html:
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

To start, your HTML is a little bit off:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<!-- needs a parent UL element -->
<li>
<input id="resume-field" class="field field288" type="text"
value="Type a speciality you want to add to your profile"
title="Type a speciality you want to add to your profile"
name="skill[label]"></input>
<!-- as a side not, input tags can be self-close (<input type="text" />)
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
If you've changed your input to a select element, then you need option elements, of which each can have a "value" attribute, as follows:
<select>
<option value="something">Something</option>
</select>
In the context of what you are trying to do, I'm not sure that a select element would fit your needs if you are wanting the user to type something in... You could pre-fill the select element with option elements, each corresponding to a specific "specialty that they want to add to their profile".

UPDATED and SIMPLIFIED:
Assuming that you did change the <input> elements to <select><option></select> elements, your code will work fine with only minor changes.
jsFiddle Demo
Really, you only need to track the change event:
HTML:
<form id="new_skill" class="new_skill" method="post" action="/skills" >
<li>
Select a specialty to add to your profile:<br>
<select id="resume-field" name="skill[label]">
<option value="default">Select a speciality:</option>
<option value="cod3r">Programming</option>
<option value="pizza">Pizza consumption</option>
</select>
</li>
<li>
<input class="button button-add button-add-disabled"
type="submit" value="ADD +" name="commit"></input>
</li>
</form>
javascript/jQuery:
$(document).on('change', '#resume-field', function() {
if(this.value=='default') {
$(this).parents().find('.button-add').addClass('button-add-disabled');
} else {
$(this).parents().find('.button-add').removeClass('button-add-disabled');
}
});
PS: Of course, to make the jsFiddle work I also had to temporarily remove the url() etc from your css...

Based on 1st dropdown the 2nd should be visible. It works in all browsers but not in IE (all versions)

Why is the following code not working in IE (all versions)?
I have 2 dropdowns. The 2nd dropdown should display based on the 1st. This is working in all browsers but not in any version of IE. Please help me out. What is the mistake in this code?
<html>
<style type="text/css">
#navMenu {
margin: 70px;
padding: 40px;
}
#navMenu select {
color: #000;
background: #CD5C5C;
font-size: 15px;
font-weight: bold;
padding: 2px 10px;
width: 200px;
font-family:"Calibri",cursive;
text-align:center;
}
p.hiddenMenu {
display: none;
}
p.visibleMenu {
display: inline;
}
</style>
<script type="text/javascript">
var lastDiv = "";
function showDiv(divName)
{
if (lastDiv)
{
document.getElementById(lastDiv).className = "hiddenMenu";
}
if (divName && document.getElementById(divName))
{
document.getElementById(divName).className = "visibleMenu";
lastDiv = divName;
}
}
</script>
<body bgcolor="#87CEFA">
<div id="wrapper">
<div id="navMenu">
<select name="category" id="statename" onchange="showDiv(this.value);">
<option value="-1"><b>--Select State--</b></option>
<option>one</option>
<option>two</option>
<option>three</option>
<option>four</option>
<option>five</option>
<option>six</option>
<option>seven</option>
</select>
<br class="clearFloat" /></br>
<form id="aform">
<p id="one" class="hiddenMenu">
<select id="mymenu" size="1">
<option value="">--select--</option>
<option value="http://google.com">one selected</option>
<option value="http://google.com">two selected</option>
</select>
</form>
</p>
<script language="javascript">
var selectmenu=document.getElementById("mymenu")
selectmenu.onchange=function()
{
var chosenoption=this.options[this.selectedIndex]
if (chosenoption.value!="nothing")
{
window.open(chosenoption.value,"_parent")
}
}
</script>
</div></div>
</body>
</html

In non IE browsers this.value gets label value if there is no value attr associated with options tag. But in IE it will be a empty string.
you may use like this:
<option value="one">one</option>