What is the process for adding JSON data to a dropdown menu using PHP AJAX?

I am trying to populate a select html element with data from a list of JSON results. Here is the code I have attempted:

JSON output: jquery loop on Json data using $.each

{"Eua":"Eua","Ha'apai":"Ha'apai","Niuas":"Niuas","Tongatapu":"Tongatapu","Vava'u":"Vava'u"}

 success: function(result){
                    
                    console.log(data);
                    var data = jQuery.parseJSON(result);
                    jQuery.each(data,function(key, value)
                {   //jQuery("#state").html();
                    console.log(key);
                    jQuery("#state").html('<option>'+value+'</option>');
                })
javascriptajax

Answer №1

By utilizing the following code snippet:

jQuery("#state").html(...)

you will overwrite the existing option with a new one, ultimately displaying only the last Json value.

If you utilize:

jQuery("#state").append(...)

Instead, this code will add an additional option to the select dropdown without removing any of the previous options.

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

A guide on crafting OR queries in Elasticsearch using Node.js

I currently have a document structured like this: Sample document, [ { "_index": "xpertdox", "_type": "disease", "_id": "Ectopic Heartbeat", "_score": 24.650267, "_source": { "category": "Condition", "name": "Ectopic ...

javascriptnode.jselasticsearchcluster-computingmean-stack

Determining the Clicked Button in React When Multiple Buttons are Present

Within my functional component, I have a table with rows that each contain an edit button. However, when I click on one edit button, changes are applied to all of them simultaneously. How can I identify which specific button was clicked and only apply chan ...

javascriptreactjs

Utilizing Angular for making API requests using double quotes

I am experiencing an issue with my service where the double quotation marks in my API URL are not displayed as they should be. Instead of displaying ".." around my values, it prints out like %22%27 when the API is called. How can I ensure that my ...

javascriptangulartypescript

Showing JSX/HTML content depending on the props received

Can you identify the name of this type of expression and do you know in what scenarios it should be applied? {props.type === "big" && <h2>{props.title}</h2>} ...

javascripthtmlreactjsjsx

Different methods of transferring PHP post information to JavaScript

Is there a cleaner and more elegant way to pass posted PHP variables to JavaScript for manipulation, rather than using inline JavaScript? I currently have a simple PHP form that posts data to specific variables and then uses inline JavaScript to handle the ...

phpjavascripthtml

Ways to send information from Vue instance to nested components

Currently, I am fetching data using AJAX from the Vue instance and trying to pass it onto different components. As I delve deeper into learning Vue.js, I can't help but notice that the documentation seems a bit scattered... This snippet showcases wha ...

javascriptvue.jsfrontend

Refresh a PrimeFaces component inside a dialog using ajax from another component

Having trouble getting the ajax feature to work properly when using selectOneMenu to update another selectOneMenu. What could be causing the issue in the code? The current code is functional but I only want to update specific parts of the form. <p:dia ...

ajaxprimefaces

"Implement highcharts redraw() method to update the chart, along with a callback function that interacts

I am working with a chart that utilizes the events.load function to draw lines based on the properties of the chart. The load function is functioning as expected, but I want to erase and redraw the lines each time the chart is redrawn, such as when hiding ...

javascripthighcharts

Generating progress bar in Javascript while exporting CSV fileCan JavaScript export CSV and

Looking for a way to add a progress bar while generating and serving a CSV file via ajax? The database-heavy process is causing a delay, so I need a loader on the screen that disappears once the task is complete. It should be done with ajax or stay on th ...

javascriptajaxcsvprogress-bar

Mastering the art of integrating a multi-step form in React

While developing a multi-step form in my React 17.0.1 application using Typescript version 4.1.2, I came across this helpful guide: https://dev.to/sametweb/how-to-create-multi-step-forms-in-react-3km4 The guide was clear up to step 6, which I decided to s ...

javascriptreactjs

Using React Bootstrap to conditionally render columns within an array map

Within my React application, I am currently utilizing the map function to generate Bootstrap columns in the JSX code of the render method. One specific attribute within the array object I'm mapping is named "taken." Depending on whether this attribute ...

javascriptreactjsreact-bootstrapconditional-rendering

The destroy method of Chart.js does not appear to have any impact on the

Hello, I've come across this issue in my react app that I need help with: this.chart = new Chart(node, options); // adding data to the chart ... this.chart.destroy(); this.chart = null; this.chart = new Chart(node, options); // adding data to the cha ...

javascriptreactjschart.jschart.js2

Calculating values within dynamically generated elements requires utilizing JavaScript to target and extract the

I am working on creating input fields inside an HTML table using Vue.js. On click of a button, I want to perform some calculations based on the input values. However, it seems that the calculations are not happening as desired. What I have attempted so fa ...

javascripthtmlvue.js

Shut down a pop-up overlay

I've been facing a challenge in implementing greasemonkey to automatically close a modal when the "x" button is clicked. Allow me to share with you the code snippet for the webpage: <div class="modal-header"> <button type="button" class="clo ...

javascriptajaxmodal-dialoggreasemonkey

Storing the selected value from a dropdown box in PHP

Can anyone help me with echoing the $row['price'] based on the user's GPU selection? Your input is greatly appreciated! #adding more content to meet word count requirements. <div id="content"> <table border="1" style="width: ...

javascriptphpsql

Use $.ajax to display the menu by capturing an array of elements {0}

Whenever I click on one of the DIV elements, a menu pops out on the side displaying more information about the clicked element. I can determine which element I'm clicking on, but I'm struggling to pass that information from jQuery to the PHP pag ...

javascriptphpjqueryhtmlajax

Steps to integrating an interface with several anonymous functions in typescript

I'm currently working on implementing the interface outlined below in typescript interface A{ (message: string, callback: CustomCallBackFunction): void; (message: string, meta: any, callback: CustomCallBackFunction): void; (message: string, ...m ...

javascriptnode.jstypescript

The function crypto.randomUUID() does not exist in the Vitest library

vite.config.ts import { sveltekit } from '@sveltejs/kit/vite'; const config = { plugins: [sveltekit()], test: { include: ['**/*.spec.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'], environment: 'jsdom', glo ...

javascriptnode.jstestingsveltevitest

Modify Knockout applyBindings to interpret select choices as numeric values

Utilizing Knockout alongside html select / option (check out Fiddle): <select data-bind="value: Width"> <option>10</option> <option>100</option> </select> Upon invoking applyBindings, the options are interprete ...

javascripthtmlknockout.js

Is it possible to nest clicks for ajax calls within the results of a previously appended call?

As I dive into learning about AJAX to enhance page loading speed by avoiding reliance on PHP for displaying results, I've encountered a challenge. I have three tiers of data distributed across three database tables: The first tier of data is fetche ...

phpjqueryhtmlajaxnested