It seems impossible to modify the border style of a div element through a dropdown select menu

I have created a dropdown menu that is intended to change the border style of a div element. The dropdown uses select and option HTML tags. However, when I trigger the .change() event, the border style does not update to the selected value. Can someone please point out what I am doing wrong? You can view the code on this JSFiddle link.

Below is the JavaScript code:

$(function() {
   $("select").change(function() {
     var getChoice = $("select option:selected").val();
     $('.active').css('borderStyle', getChoice);
   });
});
javascriptjqueryhtmlcsshtml-select

Answer №1

Make the switch from using val() to text()

This is how:

$("select option:selected").val();

Modify it to:

$("select option:selected").text();

Answer №2

To apply different border styles, you can assign a value to each option and then implement it in your code like so:

<select id="me">
  <option value="volvo">Border-style</option>
  <option id="b-style" value="Solid">Solid</option>
  <option id="b-style" value="Dotted">Dotted</option>
  <option id="b-style" value="Dashed">Dashed</option>
  <option id="b-style" value="Double">Double</option>
  <option id="b-style" value="Mixed">Mixed</option>
  <option id="b-style" value="Remove">Remove</option>
</select>

$(function() {
  $("select").change(function() {
    $('.active').css("border-style", $(this).val());
  });
});

See the updated JSFiddle link for reference.

Answer №3

Get the selected option's text using the Id var getChoice = $("#me :selected").text();

$(function(){
$('select').on('change', function() {
    var getChoice = $("#me :selected").text();
    $('.active').css('borderStyle', getChoice);
});
});
.active{
  height: 50px;
  width: 50px;
  border: 5px dotted grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="me">
  <option value="volvo">Border-style</option>
  <option id="b-style" value="">Solid</option>
  <option id="b-style" value="">Dotted</option>
  <option id="b-style" value="">Dashed</option>
  <option id="b-style" value="">Double</option>
  <option id="b-style" value="">Mixed</option>
  <option id="b-style" value="">Remove</option>
  
</select>

<div class="active"></div>

Answer №4

Hello, in the code snippet provided, there is a repetition of id which should always be unique. You just need to extract the value from the select field.

Here is a reference snippet for your guidance:

$('select').change(function(){
  $('div').css({'border-style':$(this).val()});
});
div{
width:120px;
height:120px;
border:1px solid #333;
}
<html>
<body>
<div>

</div>
  <select>
    <option value='dashed'>dashed</option>
    <option value='dotted'>dotted</option>
    <option value='double'>double</option>
    <option value='mixed'>mixed</option>
  </select>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the top choice for creating a cutting-edge front-end web module?

Which generator or scaffold is recommended for creating a contemporary front-end web module using npm/webpack? ...

javascriptnpmwebpack

Achieve consistent column heights with flexbox styling

I have a solution for achieving equal height columns using the CSS property display:table. Here is an example: .row { display: table; width: 100%; } .col{ display: table-cell; } However, in my case, I am using flexbox and the row class has ...

htmlcssflexbox

Exploring the Contrast between Cursor and Stream in Node.js

When it comes to extracting large data from a database, there are options like using stream or cursor. I'm curious to find out which option is more efficient and also dive into how cursor and stream work internally in node js. ...

javascriptnode.jsdatabase

Displaying information in a visually appealing way with DataTable and Bootstrap 4.2.1, featuring customizable options

I am having trouble replicating the format shown on the example page of the DataTables website. <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4. ...

cssdatatabledatatablesbootstrap-4

Acquiring the content between the start of a paragraph and a designated hyperlink with the help of jQuery

I'm currently working on a jQuery script to extract the text from within a paragraph starting from the beginning up to a specific link: <p> Lorem ipsum dolor sit amet, <a href="#">aliqua</a> consectetur adipiscing elit, sed do e ...

javascriptjqueryhtml

How to set focus on the active accordion in jQuery accordion?

**Update: I've cracked the code! ** This is how I achieved it: $("#accordion").accordion({ header:'h3', active: '#section1', autoheight: false, clearstyle: true, }).bind("change.ui-accordion", func ...

jqueryinputfocusaccordion

No Response Received from AJAX $.get() Request

I am attempting to implement ajax functionality for the first time in my WordPress theme. After researching the syntax and how it works, I wrote a script that seems to be executing properly but is not returning any response. Using $.get for the Request $ ...

phpjqueryajaxwordpress

Tips for speeding up your website by preloading versioned files in HTML

Tools like Google Lighthouse and PageSpeed recommend preloading important requests using <link rel=preload> to enhance website performance. When it comes to static files with unchanging filenames, the process is straightforward. However, how can I ...

htmlangularprimengpagespeedlighthouse

Having trouble identifying whether a file is a picture or video based solely on its extension

My current challenge involves determining whether an uploaded file is a video or a photo. This distinction is crucial as it dictates whether the file should be sent to my telegram bot as a video or photo attachment. Despite having what seems like a logica ...

javascriptnode.jsexpressformidable

One function in Typescript lodash is missing a default export

Is there a way to import just one function from lodash? I attempted it like this: import get from 'lodash/get'; Even after installing both lodash and @types/lodash, I encountered the following error message: @types/lodash/get/index"' ha ...

javascripttypescriptlodash

Hide jQuery dropdown when mouse moves away

I am working on designing a navigation bar with dropdown functionality. Is there a way to hide the dropdown menu when the mouse pointer leaves both the navbar menu and the dropdown itself? I have tried using hover, mouseenter, and mouseleave but due to my ...

javascriptjqueryhtmlcss

Looking for an image that spans the entire height of the container

I need help with positioning an img inside a div container that has a background color. I want the image to overlay on top of the div, extending beyond its height without causing any scroll bars. Here is a fiddle related to this issue: http://jsfiddle.net ...

javascripthtmlcss

Change the color when hovering over the select box

Using jQuery, my goal is to change the hover color in a select box from its default blue to red. I understand that the hover color of the select input may vary based on the operating system rather than the browser, but I am making progress towards achievin ...

javascriptjqueryhtml

Prevent fields from being edited until the main field is filled out

Currently, I am in the process of designing a form with three primary fields at the top – Organization Name, Department, and Address. The other fields are not relevant for now. It is imperative that the user inputs data into the Organization field before ...

jqueryhtmlcssforms

Would it be advisable to store HTML data in a database?

Currently, I am in the process of developing a blog-app project using Angular 7. For the backend, I am utilizing firebase cloud functions and performing CRUD operations by storing HTML content in firebase with the help of Angular - CKEditor component. Whe ...

htmlangularfirebasefirebase-realtime-databasecrud

What is the best way to retrieve distinct id values from a form in Rails when sending a DELETE request via AJAX?

I am determined to grasp the intricacies of AJAX and how it operates, hence, I prefer not to use "remote: true" for this task. The issue at hand is that despite attempting to send a DELETE request to the server using a form input, each submission results i ...

javascriptjqueryruby-on-railsrubyajax

Utilize BootStrap framework to embed Twitch player, ensuring it fills the entire width of its parent element

I'm new to web development and struggling to make my embedded Twitch player use its parent's full width. The height is fine, but using the d-flex class from Bootstrap makes the player extremely thin. Please review my code here: https://jsfiddle. ...

htmlcssbootstrap-4twitch

Unable to alphabetically arrange buttons automatically

I am encountering a challenge with automatically sorting buttons alphabetically on my webpage. I am unable to determine the method for sorting these buttons using jquery or javascript, but my goal is to have them sorted automatically when the page loads. I ...

javascriptjqueryhtmlbutton

Issue with fadein callback malfunctioning when loading json data through ajax

This is a digital portfolio page showcasing various design projects. Upon loading the page, JSON data is fetched using ajax, and one of the keys is utilized to create a list of '.project-links'. The actual project images are not loaded initially, ...

javascriptajaxjsonfadeinfadeout

Is it possible to exchange meshes across different scenes in three.js?

Can meshes or geometry be shared across scenes? I am facing an issue where I have multiple scenes that require the same large meshes, but attempting to share these meshes between scenes results in WebGL context errors. It seems like certain variables are ...

javascriptthree.js