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

Check if there is any option then show div

I want to check if there is an option in select then show the div if not then hide. I am not checking selected option I am checking all options.
if (jQuery(".sd select option").text() == 'S') {
console.log('hello');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="input-box sd">
<select name="options[1261]" id="select_1261" class=" required-entry product-custom-option" title="" onchange="opConfig.reloadPrice()">
<option value="">-- Please Select --</option>
<option value="6888" price="0">S </option>
<option value="6889" price="0">M </option>
</select>
</div>

if there is an option in select
You can use .filter() to iterate over the options and check them length of the matched items, similar to this.
var hasOptionS = $('select option').filter(function(){return this.text.trim().toUpperCase() === 'S'}).length > 0;
var hasOptionP = $('select option').filter(function(){return this.text.trim().toUpperCase() === 'P'}).length > 0;
console.log('has Option S:', hasOptionS);
console.log('has Option P:', hasOptionP);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="input-box sd">
<select name="options[1261]" id="select_1261" class=" required-entry product-custom-option" title="">
<option value="">-- Please Select --</option>
<option value="6888" price="0">S </option>
<option value="6889" price="0">M </option>
</select>
</div>
then show the div if not then hide
Ones you have the result you can use it in your conditional check, similar to this:
if(hasOption){
$(yourDiv).show();
} else {
$(yourDiv).hide();
}

var theSelect = document.getElementById("select_1261");
var stop = false;
for (var i = 0; i < theSelect.options.length & stop != true; i++) {
switch (theSelect.options[i].innerHTML) {
case "S ":
case "M ":
document.getElementById("cooldiv").style.display = "none";//hide the div
stop = true;
break;
default:
break;
}
}

$('.dropdown').each(function() {
var _length = $(this).children('option').length - 1;
//console.log(_length);
if (_length < 1) {
$(this).hide();
}
});
.dropdown-box {
display: inline-block;
background-color: #F4F4F4;
margin: 10px;
padding: 20px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-box">
<p>Has values:</p>
<div class="input-box">
<select name="options[1261]" id="select_1261" class="dropdown">
<option value="">-- Please Select --</option>
<option value="6888" price="0">S </option>
<option value="6889" price="0">M </option>
</select>
</div>
</div>
<div class="dropdown-box">
<p>Has no values:</p>
<div class="input-box">
<select name="options[1261]" id="select_1261" class="dropdown">
<option value="">-- Please Select --</option>
</select>
</div>
</div>

displaying Multiple select option in diiferent line

I have a multiple select option that display the result in a div container, when click on ctrl+"orange""apple""banana" the result display: "orange, apple, banana" in one line, but i want to display each result in a new single line with a link that goes to different page like this:
Orange - "goes to a link"
Apple - "goes to a link"
Banana - "goes to a link"
Here are my codes below:
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript">
</script>
<select name="" multiple="multiple" id="select-custom-19">    
<option>Add Fruits</option>        
<option value="orange" selected>orange</option> 
<option value="apple">apple</option>
<option value="banana">banana</option>             </select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; "> <span id="yourfruit"> </span>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#select-custom-19').change(function() {
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
$('#yourfruit').text($(this).val());
});
});
</script>
your help will be highly appreciated.
Thanks

You can try adding <br/> element after every selected option. I have used <label> element but you can add link or any other element you want
$(document).ready( function ()
{
$('#select-custom-19').change(function(){
$('#yourfruit').empty();
var values = $(this).val();
for(var i=0; i < values.length ; i++)
{
$('#yourfruit').append('<lable>'+values[i]+'</label><br/>');
}
});
});
JSFiddle Demo

You can iterate throug items and display them, append an anchor (<a />) and use <br /> for a new line.
Make sure to add .empty() to clean the fruits from list before .append() other items to $('#yourfruit'), like in example below.
var fruits = $(this).val();
$('#yourfruit').empty();
for (var fruit in fruits) {
var label = $('<label/> ').text(fruits[fruit]+" - ");
$('#yourfruit').append(label)
.append($('<a class="tab-btn" />').text(fruits[fruit]).attr('href', fruits[fruit] + '.html'))
.append('<br />');
}
$(document).ready(function() {
$('#select-custom-19').change(function() {
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
var fruits = $(this).val();
$('#yourfruit').empty();
for (var fruit in fruits) {
var label = $('<label/> ').text(fruits[fruit] + " - ");
$('#yourfruit').append(label)
.append($('<a class="tab-btn" />').text(fruits[fruit]).attr('href', fruits[fruit] + '.html'))
.append('<br />');
}
});
});
.tab-btn {
color: red;
}
.tab-btn:hover {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; ">
<span id="yourfruit"> </span>
</div>

try below
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903; color:#000000; margin: 10px; ">
<ul id="yourfruit">
</ul>
</div>
<script type="text/javascript">
$(document).ready( function ()
{
$('#select-custom-19').change(function()
{
/* setting currently changed option value to option variable */
var option = $(this).find('option:selected').val();
/* setting input box value to selected option value */
$('#yourfruit').append('<li>'+$(this).val()+'</li>');
}
);
});
</script>

You may add HTML tags as per your requirements, like <a> or </br>
$(document).ready(function () {
$('#select-custom-19').change(function () {
$('#yourfruit').text("");
if($(this).val() != null)
{
$(this).val().forEach(function (value, index) {
$('#yourfruit').append("<a href='#'>" + value + "</a></br>");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<select name="" multiple="multiple" id="select-custom-19">
<option>Add Fruits</option>
<option value="orange" selected>orange</option>
<option value="apple">apple</option>
<option value="banana">banana</option>
</select>
<div style="width:300px; height:70px; background-color:#E1D903;
color:#000000; margin: 10px; "> <span id="yourfruit"> </span>
</div>

Javascript Select option in Select box based on class

I have a div that contains many classes. If the the div is clicked on and one of it's classes matches the value any option in the select box, i want that option to be selected.
<div class="abc cdf fff r10 yyy">
<select id="whatever">
<option value="r10">test10</option>
<option value="r20">test20</option>
<option value="r30">test30</option>
</select>
How do i achieve this with JavaScript or jQuery
I tried the following but can't get it to work.
var roundclasses = $(this).attr('class').split(/\s/); //This outputs the array of classes sucessfully
for (var i in roundclasses){
$('#whatever').val(roundclasses[i]);
}

Here is the JSBin snippet.
HTML:
<div id="clickDiv" class="abc cdf fff r30 yyy">
<p>CLICK</p>
</div>
<select id="whatever">
<option value="r10">test10</option>
<option value="r20">test20</option>
<option value="r30">test30</option>
</select>
JS (using jQuery):
var div = $("#clickDiv");
var sel = $("#whatever");
var options = $("#whatever option");
div.click(function() {
options.each(function(index, e) {
if (div.hasClass(e.value)) {
sel.val(e.value);
}
});
});
EDIT:
Created a JSBin with shorter solution - HERE
var div = $("#clickDiv");
var options = $("#whatever option");
div.click(function() {
options.attr('selected', function() {
return div.hasClass(this.value);
});
});

Here is the jsFiddle.
HTML:
<div id="clickme" class="abc cdf fff r10 yyy">Click Me</div>
<br>
<br>
<select multiple="true" id="dd">
<option value="r1">test1 (r1)</option>
<option value="r2">test2 (r2)</option>
<option value="r2">test3 (cdf)</option>
<option value="yyy">test4 (yyy)</option>
<option value="r10">test9 (r10)</option>
<option value="r10">test10 (r10)</option>
</select>
CSS:
#clickme {
background: #FF0000;
color: #FFF;
font: 14px Arial, sans-serif;
height: 100px;
line-height: 100px;
text-align: center;
width: 100px;
}
JS:
var $dd = $("#dd"),
$dd_opts = $dd.find('option');
$("#clickme").click(function() {
var classes = $(this).attr('class').split(' '),
class_len = classes.length;
$dd.val('');
for (x = 0, class_len = classes.length; x < class_len; x++) {
var cls = classes[x],
$opts = $dd_opts.filter('[value="'+ cls +'"]');
$opts.attr('selected', 'selected');
}
});