Options in the dropdown menu

After browsing online, I came across a functional example that I would like to replicate in a similar manner.

Is there a way to show 2 different prices and currencies for the same selection in a drop-down menu without having separate drop-downs for each currency/price? According to what I have been informed, only the value (in this case, the price value) from the drop-down can be saved to MySQL. I am interested in saving the selected name instead of the currency/price, or maybe even both if feasible.

<select id="bedrooms" onchange="changeddl(this)">
          <option>Choose beds</option>
          <option value="150">1 bed</option>
          <option value="200">2 beds</option>
          <option value="300">3 beds</option>
          <option value="400">4 beds</option>
        </select>

        <div id="divprice"></div>

        function changeddl($this){
           $("#divprice").text($this.value>0?("price: $ " + $this.value):"");
        };

Answer №1

If you want to show both the name and the price, you can try this code snippet:

function displayPrice($this){
           var item = $('#bedrooms option:selected').text();
           $("#divprice").text($this.value > 0 ? (item + " - price: $ " + $this.value) : "");
        };

When it comes to choosing the currency, consider using a separate dropdown to allow users to select their preferred currency.

Answer №2

If you're looking for a user-friendly way to capture input, consider using a drop down list. By incorporating a trim function, you can easily assign the user's selection to a variable. Take a look at the following example:

<td><asp:DropDownList ID ="BedroomsDropDown" runat="server" Width="75px"
                        >
                    <asp:ListItem></asp:ListItem>
                    <asp:ListItem>$150, 1 bed</asp:ListItem>
                    <asp:ListItem>$200, 2 beds</asp:ListItem>
                    <asp:ListItem>$300, 3 beds</asp:ListItem>
                    <asp:ListItem>$400, 4 beds</asp:ListItem>
                    </asp:DropDownList></td>

After selecting a value, you can assign it to a variable using the following code:

BEDS = BedroomsDropDown.Text.Trim();

Ensure that the variable assignment is triggered by an action like clicking a button. Let me know if you need guidance on this. With the input stored in a variable, you can manipulate it for various purposes.

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

Angularjs: The Art of Loading Modules

I am facing an issue while trying to load certain modules. controller1.js: angular.module('LPC') .controller('lista_peliculas_controller', ['$scope', function($scope) { $scope.hola="hola peliculas"; }]); And ap ...

Attempting to showcase a collection of values, specifically focusing on highlighting the even numbers within the array

const sampleArray = [ 469, " " + 755, " " + 244, " " + 245, " " + 758, " " + 450, " " + 302, " " + 20, " " + 712, " " + 71, " " + 456, ...

Looking to consolidate the data from several tables into a single row output

For my project, I am looking to fetch data from multiple tables by joining them and retrieving multiple cuisine names from the t_cuisine table. The goal is to have all the cuisine names in one row, with their corresponding cuisine_ids in the t_search.cuisi ...

What steps should I take to implement the features I want using Node.js?

My request is as follows: I need to pass an array of IDs to a function that will perform the following tasks: Check if a document exists in MongoDB. If it does, move on to the next ID. If not, create a document with the specified ID. If all the IDs ...

Is it possible to define a Divider or Header within the options array for the dropdown component in Semantic UI React?

Currently, I'm incorporating ReactJS along with SemanticUI for ReactJS to enhance the appearance of my front end. My query pertains to whether it is feasible to define a header or divider within the options array of objects for a dropdown component? ...

The move_uploaded_file function is experiencing issues when utilizing cURL in PHP

Below is the code snippet where I am using curl to send images and registration number... char url[]="xyz.com/imm/application.php?"; char curlErr[2*CURL_ERROR_SIZE]={0}; CURL *curl=NULL; struct curl_httppost *post=NULL, *last=NULL; FILE * ...

The second post request is encountering an issue where Request.body is not defined

After researching for similar symptoms, I couldn't find a case that matches mine. I have body-parser properly installed and app.use(bodyParser.json()) app.use(bodyParser.urlencoded({extended: true})) configured accordingly. However, when handl ...

Steps for generating an order from a shopping cart in Mongoose and removing the cart from the system

In my current task, I need to: Generate an order based on the items in my shopping cart Include the relevant object attributes in the order response based on the selection in the "select" option Ultimately, I aim to clear or delete the cart once the order ...

Is utilizing v-model to update the Vuex store a recommended practice?

Hello there! As a newcomer to Vue, I find myself facing a dilemma that has been weighing on my mind. I'm confused about whether we should utilize the v-model directive to make changes to the Vuex store. While Vuex guidelines suggest modifying the stor ...

Having trouble adding/removing/toggling an element class within a Vue directive?

A successful demonstration can be found at: https://jsfiddle.net/hxyv40ra However, when attempting to incorporate this code within a Vue directive, the button event triggers and the console indicates that the class is removed, yet there is no visual chang ...

Restricting the time frame in HTML 5

My form includes an input field with the type date <input type="date" id="datepick" name="mybirthday" placeholder="Birthdate(MM/DD/YYYY)" /> I am looking to restrict the date range that users can select. I specifically do not want users to be able ...

Why is my React build's index.html coming up empty?

I've been working on a React app using Snowpack, and everything seems to be in order. The build process completes successfully, but when I try to open the index.html file from the build folder, the page appears blank. To temporarily resolve this issu ...

What is causing the components to not re-render after a state change in React?

I am attempting to retrieve data from the Coin Market Cap API and showcase the details in simple cards. I have experimented with various methods and included comments to document my trials. Any assistance would be greatly appreciated. This is the Parent: ...

Insert data into MySQL database using Java server and client communication

Currently, I am developing a simple Java server to interact with my MySQL database. The primary function of this server is to check if a given username already exists in the database and either confirm its existence or create a new record if it does not. T ...

Generating a basic PHP Request

I am a beginner in PHP and I am attempting to create a basic server using GET and POST request methods. The PHP server should simply receive JSON data and save it (POST) and then return it to the user (GET). However, for starters, I am trying this: PHP ...

JavaScript - Returning an object using a promise

I'm facing an issue where I am struggling to retrieve an object with a specific structure, but I am unable to successfully return the object. When I inspect the code, I notice that if I log the data inside the promise, it shows the data. However, whe ...

Having trouble accessing the inline transform scale with jQuery

I am working on a new feature where I need to extract the inline transform scale value from each list item (li). Below is a demonstration for you to assist me: HTML <div style="color:red;transform:scale(1);">Dummy content</div> JS $(functi ...

The Element Ui component fails to update when the prop of the Vue component changes

In my project, I have a parent component and several child components which all make use of the same prop. This prop is an array of keys that are used for a dropdown menu in element.js. Initially, when the children render for the first time, they do not co ...

Getting Bootstrap columns to work well with Angular ng-show

I am working with three columns in Bootstrap, all set to col-md-4 width. The middle column has an ng-show attribute that may hide it at times. When the rightmost column becomes visible due to friend requests, it displaces the middle column if it's hid ...

Unable to receive the expected response within the Ajax success callback

I'm new to PHP and WordPress and I'm using an Ajax call to submit form information. I want to display a "Thank you" message within a <div> element as a response. Although I can execute the function in function.php, I'm not receiving a ...