Enhance the appearance of an HTML dropdown list with a JavaScript function triggered by a change event

I'm struggling to add a background color to this drop-down menu. I tried including new{style="background-color: #fff;"} in the code below, but it doesn't seem to be working as expected. How can I achieve this?

     <%=Html.DropDownList("dd", 
                       new List<SelectListItem>
         {
            new SelectListItem{ Text="dd1", Value = "dd1" }, 
            new SelectListItem{ Text="dd2", Value = "dd2" }

         }
                            , new { onchange = "jsfunc()" } 


         )%>

This is what I attempted:

     <%=Html.DropDownList("dd", 
                       new List<SelectListItem>
         {
            new SelectListItem{ Text="dd1", Value = "dd1" }, 
            new SelectListItem{ Text="dd2", Value = "dd2" }

         }
                            , new { onchange = "jsfunc()" }
                            , new {style="background-color: #fff;"}


         )%>

Answer №1

Avoid incorporating inline styles into your code. Instead, consider creating a class for more efficient styling. Here's an example of the syntax:

new { @class = "yourclass", @onchange = "jsfunc()" }

Answer №2

There seems to be a syntax error in your code, specifically with

new {@style = "background-color: #fff"}
. It is advisable to use a class instead of inline styling.

Edit

new { @onchange = "jsfunc()", @style = "background-color: #fff"}

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

Leverage lodash operators within nested object properties

My data consists of an array of objects { "agent_name": "AgentName", "analytics": [ { "date": "Tue, 1 Aug 2021 00:00:00 GMT", "intents_count":[ { "coun ...

Preventing pop-up windows from appearing when triggered by a mouse click event

I am looking for a solution to trigger a popup window when a user right-clicks on a specific area. Here is the current code I am using: $("#popup").bind('mousedown', function(e) { var w; if(e.which==3) { w=window.open('link& ...

Spinning Earth around in circles

I am attempting to create a rotation of the Earth around its tilted axis using Three.js. I came across this helpful solution and tried implementing it in my code, but unfortunately, it doesn't seem to be working as expected. After running the code, I ...

Angular: The Process of Completely Updating a Model Object

Within my application, there is an object named eventData which acts as a singleton and is injected into multiple controllers through a resolve function. This eventData contains various sets of data such as drop down list values along with the main model. ...

Python script using selenium webdriver to interact with an accordion container and expand its contents (round

After successfully creating a scraper, I encountered an issue where the data I needed to scrape was hidden and required manual expansion before scraping. Upon inspecting the webpage source code, I found that the data was located within 3 different accordio ...

Can the functionality of two-way data binding be achieved in Angular without utilizing ng-model and ng-bind?

During an interview, I was presented with this question which sparked my curiosity. While I have a foundational understanding of AngularJS and its ability to enable two-way data binding using ng-model and ng-bind, I am interested in exploring alternative ...

Is there anyone out there who has successfully imported a model from the three.js editor?

As a designer and 3D artist who occasionally delves into coding, I have a question regarding loading a model from the three.js editor into an actual web page. Despite my limited programming knowledge, I've tried various methods to achieve this, includ ...

Preventing the dropdown options from appearing in Angular when clearing the input field

In a reusable component, I implemented some simple logic to clear the value of a select input when the 'x' button is clicked. select.component.ts @Input() selectFormControlName: string; @Input() selectAbstractControl: AbstractControl; ... ...

Basic looping through a single item to showcase its properties and data

I have an object that looks like this: const people = { men: 4, women: 2, total: 6, participants: { 1: 4, 2: 1, 3: 0 } }; I am looking to display the following result: 1 participants count 4 2 participants count 1 3 participan ...

Save JSON data from Javascript to a file on the server without using a server-side application

I am currently working with a .js client and need to save an object to a file on the server. This is new to me as I am not familiar with file i/o using JavaScript. My plan is to utilize jquery and json for this task, and I am using java serverside. Althoug ...

Challenge with using ng-repeat and groupBy together

Let's say I have an array called users structured like this: $scope.users = [ { "name": "foo", "status": "pending" }, { "name": "bar", "status": "pending" }, { "name": "baz", "status ...

javascript: permit users to log in once session expires

I am looking to create a JavaScript program for my HTML webpage that will prompt the user to re-enter their password if the session has been idle for x minutes, meaning no mouse movement or keys pressed. It's important to note that I don't want ...

Incorporating user input into a div element

So, I'm in the process of building my own Task Tracker using JavaScript to enhance my skills, but I've hit a roadblock. I successfully implemented adding a new div with user-inputted tasks, however, there's no styling involved. <div cla ...

Challenges with Page Loading in Selenium

Inquiry: When a URL is accessed in a web browser, the page begins to load. A loading symbol appears at the top, and once it stops, our selenium script continues with the next steps. However, there are instances where the page takes longer to load all its ...

A guide on how to cycle through and modify key-value pairs using a Patch Request in MongoDB

I am working on configuring a patch request for the endpoint "/api/user?username=idHere". This patch request should accept a JSON body and update the user in MongoDB with the new key-value pairs. Currently, the line "{$set: {key: req.body[ ...

Storing new information in a database and generating JSON output using CodeIgniter

I have a field that can multiply when the user adds more data. Check out this screenshot: https://i.sstatic.net/RfCZw.png Take a look at my HTML code <tr> <td>Experience (Education)</td> <td> ...

What is the process for requiring web workers in npm using require()?

I have a setup using npm and webpack, and a part of my application requires Web Workers. The traditional way to create web workers is by using the syntax: var worker = new Worker('path/to/external/js/file.js'); In my npm environment, this metho ...

Learn how to dynamically pass a value from a prop to a router-link in Vue.js

I created a custom button component and decided to switch from using <a> tags to <router-link>. However, I encountered an error because the router-link was rendering before the prop received its value. To address this, I added an if statement b ...

Fixing Errors in ASP.NET on IIS 7

I've searched everywhere but can't seem to find a solution. I must be missing something obvious! So, I started a new project, an ASP.NET Web App, and want to use and debug it with the local installation of IIS 7.5 on my Windows 7 x64 machine. F ...

Resolution for Vue3: Understanding why a component instance's template ref cannot locate a defined function

LoginInfo.vue <script setup lang="ts"> import { rules } from './config/AccountConfig' import { reactive } from 'vue' import { ref } from 'vue'; import { ElForm } from 'element-plus'; const info = reac ...