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>

Why is everytime i select a new value in my select option, the value is duplicating or being called more

I have a select option. Everytime I am trying to change the set value for the option select, the value is duplicating.
here is the code.
$(document).ready(function() {
var data_assessment = [];
$('#sets_id').on('change', function(e) {
e.preventDefault();
data_assessment = [];
data_assessment = JSON.parse($("#sets_id option:selected").attr('data-category'));
$("#first_category").click(function() {
console.log(data_assessment)
});
});
});
#first_category {
height: 100px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="select">
<select name="sets" id="sets_id">
<option value="" disabled selected>Select Set</option>
<option data-category="1" value="1">Set 1</option>
<option data-category="2" value="2">Set 2</option>
</select>
</div>
<div id="first_category" class="category_icons">
</div>
The more I am choosing on the select tag, the value of data_assessment variable is duplicating :(. How can I fix this, I really don't know what to do.

Insert text format from an editable <div> or textarea into the database

I am currently working on a personal project for my own website wherein I am trying to add in a feature of storing formatted text into the database. So far what I have done is able to change the font from italic to bold as a sample but I am completely clueless how I can pass this through to the database.
<style>
#fake_textarea {
width: 100%;
height: 200px;
border: 1px solid red;
}
#jBold {
font-weigth: bold;
}
#jItalic{
font-style:italic;
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button>
<div id='fake_textarea' contenteditable>
Select some text and click the button to make it bold...
<br>Or write your own text
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#jBold').click(function() {
document.execCommand('bold');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#jItalic').click(function() {
document.execCommand('italic');
});
});
</script>
</body>
</html>
Sample work:
codepen

To access the content in that editable div, you can use:
let content = $('#fake_textarea').html();
Regarding sending the data through to PHP, the easiest solution would probably be to use Ajax.
Alternative
If you don't want to use Ajax but rather an ordinary form post, you could let the button trigger a function that get's the content and populates it into a hidden field in a form, which you then submit.
Something like this: (untested pseudo code)
HTML:
<form method="post" action="foo.php" id="some-form">
<input type="hidden" name="content" id="some-hidden-input" />
<div id="fake_textarea" ...></div>
<button id="submit-button"></button>
</form>
JS:
$('#submit-button').on('click', function (e) {
// Stop the default submission
e.preventDefault();
// Get the content from the div
let content = $('#fake_textarea').html();
// Store the content in a hidden input
$('#some-hidden-input').val(content);
// Submit the real form
$('#some-form').submit();
});
Note
I'm using jQuery in these examples since you show that you're using it. All this can of course be done in vanilla JS as well.

Alright so I have tweaked Magnus' code a bit and I do thank him a lot for helping me figure this out.
textarea.php
This is where you will write your own content, format the text and throw it to your php file that in turn would insert it to the database. I added comments for those that wants to learn from this as well.
<style>
#fake_textarea {
width: 100%;
height: 200px;
border: 1px solid red;
}
<!-- Add css to modify the text -->
#jBold {
font-weigth: bold;
}
#jItalic{
font-style:italic;
}
#jUnderline{
text-decoration: underline;
}
#jLT{
text-decoration: line-through;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<body>
<!-- Put buttons here to modify the format -->
<div>
<select id="select_font" onchange="changeFont(this);">
<option value="Arial">Arial</option>
<option value="Sans Serif" selected>Sans Serif</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Courier New">Courier New</option>
<option value="Verdana">Verdana</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Impact">Impact</option>
<option value="Bookman">Bookman</option>
<option value="Garamond">Garamond</option>
<option value="Palatino">Palatino</option>
<option value="Georgia">Georgia</option>
</select>
<select id="select-size" onchange="changeSize(this);">
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="20">20</option>
<option value="24">24</option>
<option value="28">28</option>
<option value="32">32</option>
<option value="36">36</option>
<option value="40">40</option>
<option value="44">44</option>
<option value="48">48</option>
<option value="52">52</option>
<option value="56">56</option>
<option value="58">58</option>
</select>
<button id="jBold"><b>B</b></button><button id="jItalic"><i>I</i></button><button id="jUnderline">U</button><button id="jSuperScript">A<sup>A</sup></button><button id="jSubScript">A<sub>A</sub></button>
<button id="jLT">A</button>
<div>
<!-- Add a form -->
<form method="post" action="postcontent.php" id="contentform">
<!-- Add some hidden input in order for the form to submit some sort of value -->
<input type="hidden" name="content" id="hiddeninput" />
<!-- Add a place to insert the content -->
<div id='fake_textarea' contenteditable>
Select some text and click the button to make it bold...
<br>Or write your own text
</div>
<!-- Add a submit button-->
<button id="submit">Submit</button>
</form>
<!-- Script to make a selected text bold-->
<script type="text/javascript">
$(document).ready(function() {
$('#jBold').click(function() {
document.execCommand('bold');
});
});
</script>
<!-- Script to make a selected text italic-->
<script type="text/javascript">
$(document).ready(function() {
$('#jItalic').click(function() {
document.execCommand('italic');
});
});
</script>
<!-- Script to make add an underline-->
<script type="text/javascript">
$(document).ready(function() {
$('#jUnderline').click(function() {
document.execCommand('underline');
});
});
</script>
<!-- Script to make make selected text a superscript-->
<script type="text/javascript">
$(document).ready(function() {
$('#jSuperScript').click(function() {
document.execCommand('superscript');
});
});
</script>
<!-- Script to make make selected text a subscript-->
<script type="text/javascript">
$(document).ready(function() {
$('#jSubScript').click(function() {
document.execCommand('subscript');
});
});
</script>
<!-- Script to add a line-through-->
<script type="text/javascript">
$(document).ready(function() {
$('#jLT').click(function() {
document.execCommand('strikeThrough');
});
});
</script>
<!-- Changes the font type -->
<script type="text/javascript">
function changeFont(font) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-family:' + font.value + ';';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
}
</script>
<!-- Changes the font size -->
<script type="text/javascript">
function changeSize(size) {
var sel = window.getSelection(); // Gets selection
if (sel.rangeCount) {
// Creates a new element, and insert the selected text with the chosen font inside
var e = document.createElement('span');
e.style = 'font-size:' + size.value + 'px;';
e.innerHTML = sel.toString();
// https://developer.mozilla.org/en-US/docs/Web/API/Selection/getRangeAt
var range = sel.getRangeAt(0);
range.deleteContents(); // Deletes selected text…
range.insertNode(e); // … and inserts the new element at its place
}
}
</script>
<!-- Script to add value to the hidden input then submits it-->
<script type="text/javascript">
$( "#submit" ).click(function() {
var htmlString = $( "#fake_textarea" ).html();
$('#hiddeninput').val(htmlString);
// Submit the real form
$('#contentform').submit();
});
</script>
</body>
postcontent.php
This file will submit the value thrown from the hidden input to the database.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
//grabs the name of the hidden input that was posted
$pcd= $_POST['content'];
$uid="";
$bid="";
$cnum="";
$cid="";
//connect to database
$mysqli = new mysqli("localhost","root","","nw");
//error checking the connection
if ($mysqli -> connect_errno) {
echo "Failed to connect to MySQL: " . $mysqli -> connect_error;
exit();
}
//submits it
$stmt= $mysqli->prepare("INSERT INTO usercontent (userid, bookid, chapterid, chapternum,data) VALUES (?,?,?,?,?)");
$stmt->bind_param("sssss", $uid, $bid,$cid, $cnum,$pcd);
$stmt->execute();
$stmt -> close();
$mysqli -> close();
}
?>
Hopes this will help someone as much as this person helped me.

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>

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');
}
});