My idea is to use boxes to represent different options
https://i.sstatic.net/rTmIj.jpg
<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>
Do you think this approach would work?
To create div elements for each select option, you can use the jQuery each() method.
Once created, you can handle click events on these divs to update the value of a hidden select element.
Note: I have added comments in my code below for better understanding.
// Creating custom select options based on original select elements
customSelect("selectOne", "customSelectOne", 1);
customSelect("selectTwo", "customSelectTwo", 0);
// Handling click event for each custom option
$(document).on("click",".selectOption", function (event) {
// Removing previously selected options
$(this).parent("div:first").find('.selectOption').removeClass('checked');
const getOptionID = $(this).data('optionid'); // Getting data-optionid value
$(this).toggleClass('checked'); // Adding/removing checked class
// Updating value of hidden select
$(this).parent("div:first").prevAll('select:first').val(getOptionID).change();
});
$('.hideShowSelect').click(function() {
$('select').toggle();
});
/*
Function to dynamically generate select options within divs
@select : selector of the select element
@div : selector of the div container for custom options
@checked : 1 for making first div checked, 0 for not
*/
function customSelect(select, div, checked) {
// Looping through each option in the original select element
$('select[name="' + select + '"] option').each(function(index) {
// Checking if the first option needs to be pre-selected
const checkFirstOption = (index === 0 && checked === 1 ? ' checked' : '');
const optionVal = $(this).val(); // Getting option value
// Creating a div for each option with corresponding data-value attribute
$('.' + 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><a href="#" class="hideShowSelect">Hide / show select</a></p>I am currently working on an app that displays a list of cars to the user upon component load after fetching data from a GET API. The page also contains multiple checkboxes for filtering the displayed data. While I am able to filter results based on the se ...
I need to verify that when a link is clicked, a modal should open. In my spec.ts file, I have written the following test: describe('NavbarComponent', () => { let comp: NavbarComponent; let fixture: ComponentFixture<NavbarComponent& ...
Hello, I am currently working on an application that is designed to showcase dynamically generated images stored on a server. The process involves fetching the image, typically in PNG format, using an Ajax Request. The data retrieved appears as follows: ...
Hey there, I'm new to AngularJs and could really use some advice or help from you guys! I'm working on an app that allows users to login and check their current location in a building using the Cisco CMX server. This server calculates the user&a ...
When I double click on one of the divs, a blue background selection appears. I find this look to be strange and unappealing. Can someone help me remove this blue selection background? In the image, there is a grey background. ...
I'm struggling with creating an email template that renders properly across major email clients. I'm unsure of where to place my styles for the template, as I know that emails typically only support tables and require inline styles. However, tec ...
Using Masonry, I have implemented code that adjusts the columnWidth to 320 when the screen or browser window width is less than 1035px. When the width exceeds 1035px, the columnWidth should be 240. However, the current code keeps the columnWidth at 320 re ...
I have created a simple HTML code to center an image inside the body of an HTML page. It works perfectly on Windows with various browsers, and on phones vertically when rotated. However, the issue arises when I open the site on a Mac as the centering doe ...
Is it possible to retrieve the properties of HTML elements using their name or id? For example: document.getElementById('id').value; //Accessing element property in JavaScript $('#id').attr('class'); // Accessing correspond ...
When using browserify to bundle two JavaScipt files into one with the command: browserify X1.js X2.js --standalone XXX > bundle.js The file X1.js contains a function like this: function foo() { console.log("something") } And it is being exported i ...
Just diving into the world of angular and struggling with implementing a 'live search' functionality. I've stored my JSON data as a variable in a JavaScript file and successfully displayed it in the HTML. I also have a 'list' radio ...
I am facing an issue with a markdown filter where the content of component.doc is set to update through a websocket. Despite updating the scope's component, the filtered content remains unchanged. Is there a way to dynamically refresh the v-html in t ...
I have integrated the Jquery ImgAreaSelector plugin into my website. Within my site, I have implemented several keypress triggers using jquery. For example: $(document).bind('keypress', 'S', function(){ alert("You have pressed S key ...
After installing node_modules and adding faceapp.js as a dependency, I attempted to use it but unfortunately encountered some issues. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
In my HTML file, I have defined the following code: <span id="datepicker" (click)="ShowDate()"> <i class="fa fa-calendar " aria-hidden="true" style="margin-top: 20px;margin-left: 20px;" >< ...
Having trouble integrating a Vue.js app into Cordova. Everything seems to be working fine, except I'm unsure how to capture Cordova events (deviceready, pause, etc.) within my Vue application. Using the Webpack template from vue-cli. This is my file ...
I've been attempting to extract a value from an input tag, but all I keep getting is an empty string. Upon inspecting the frame source, it appears as follows: <input type="hidden" name="" class="code_item" value="00-00000159" /> In order to re ...
I am in the process of building an MVC application. My goal is to transmit data from the controller and display it using JQuery. I have constructed an array in the controller and sent it to JQuery using Json. Here is the array... And here is the JQuery ...
I have a requirement where I need to implement a link in a Table of Contents that, upon clicking, should replace the existing content of one div on a page with the content of another div on a different page. My goal is to accomplish this using only JavaScr ...
Comet programming is a well-known concept in the web development community, with jQuery reigning as the most popular JavaScript library today. Don't you agree? Now, picture a scenario where a server continuously pushes data to the client every second ...