Guide for populating the chosen item in a combobox when the form control option has various parameters

I need help populating the selected saved item into the form control.

<select class="form-control">
    <option data-parameter-id="685" data-parent-id="1052" data-aggregation-id="null" data-aggregation-parameter="null">ABC</option>
    <option data-parameter-id="993" data-parent-id="0" data-aggregation-id="43" data-aggregation-parameter="2">DEF</option>
    <option data-parameter-id="993" data-parent-id="0" data-aggregation-id="39" data-aggregation-parameter="null">XYZ</option>
<select>

My goal is to select the appropriate option when I receive an external input specifying certain parameters.

var savedOrderedAttributeId = $('#ordered-attribute-id').val();
var savedOrderedAttributeAggregationId = $('#ordered-aggregation-id').val();
var selectorForOptionWithSavedParameter = '"select"'+ ' option[data-aggregation-id="' + savedOrderedAttributeAggregationId + '"' + 'data-parameter-id="' + savedOrderedAttributeId + '"]';
$(controlSelector).find("select").val($(controlSelector).find(selectorForOptionWithSavedParameter).val());

What modifications should be made in the code to achieve selection based on both parameters?

javascriptajaxmodel-view-controllercombobox

Answer №1

To begin, iterate through the select options to find the matching option based on the data aggregation ID you are searching for. For example:

var savedOrderedAttributeId = $('#ordered-attribute-id').val();
var savedOrderedAttributeAggregationId = $('#ordered-aggregation-id').val();
    
$('select option').each(function(o) {
  
  if($(this).data('aggregation-id') == savedOrderedAttributeAggregationId && 
     $(this).data('parameter-id') == savedOrderedAttributeId) {
    //alert('found it');
    $(this).attr('selected', 'selected');
    return false;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control">
    <option data-parameter-id="685" data-parent-id="1052" data-aggregation-id="null" data-aggregation-parameter="null">ABC</option>
    <option data-parameter-id="993" data-parent-id="0" data-aggregation-id="43" data-aggregation-parameter="2">DEF</option>
    <option data-parameter-id="993" data-parent-id="0" data-aggregation-id="39" data-aggregation-parameter="null">XYZ</option>
<select>

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

Error VM5601:2 encountered - Unexpected token "<" found in JSON at position 10

I am trying to retrieve data using Ajax and jQuery, but I keep encountering an error that I cannot figure out how to fix. VM5601:2 Uncaught SyntaxError: Unexpected token < in JSON at position 10 Below is the code I am working with. Model public f ...

javascriptjqueryjsonajax

What is preventing the bundling of my CSS into the application?

I'm facing an issue while setting up a new project using vue.js, scss, and webpack (with express.js on the server side and TypeScript). I copied over the configurations from a previous project where everything was working fine. According to my underst ...

javascriptnode.jsvue.jswebpacksass

The extent of locally declared variables within a Vue component

Within this code snippet: <template> <div> <p v-for="prop in receivedPropsLocal" :key="prop.id" > {{prop}} </p> </div> </template> <script> export default ...

javascriptvue.jsvuejs2vue-component

Utilize a single array to point to multiple elements

I am curious about the potential to create a unique scenario using JavaScript. Imagine having two arrays: a = [1, 2, 3] b = [4, 5, 6] What if we could combine these arrays into a new array, c, that encapsulates both: c = [1, 2, 3, 4, 5, 6] The intrigui ...

javascript

What is the best way to incorporate Javascript into jQuery tabs?

On my website, I have implemented a Jquery and CSS tab system similar to the one found here. Each tab contains a Facebook feed box, a Twitter widget, and a ranking widget for my blog. However, when these widgets are placed within the tab content area, they ...

javascriptjquery

What are the steps to making a textfield editable with JavaScript and HTML?

My textfield is currently populated with values from the database and is functioning perfectly. I would like to implement a checkbox feature that, when clicked, will clear the textfield of the database values, allowing the user to input new values. If t ...

javascriptphpjqueryhtml

Highlighting the content within Material-UI's <Dialog> using ReactJS without affecting the entire webpage

I have an issue in my ReactJS project with the <Dialog> component from Material-UI (http://www.material-ui.com/#/components/dialog). When I open the <Dialog> and press command + a on my Mac, it highlights the entire page instead of just the con ...

javascriptjqueryreactjsmaterial-ui

Steps for setting up node-openalpr on a Windows 10 system

While attempting to install npm i node-openalpr, an error is occurring: When using request for node-pre-gyp https download, I encounter a node-pre-gyp warning and error message. The package.json for node-openalpr is not node-pre-gyp ready, as certain pr ...

javascriptnode.jsexpressnpmopenalpr

Is it possible to utilize setTimeout to demonstrate the execution of a while loop visually?

I am working on a function that generates random numbers between 1 and 6 until it matches a target value of 3. I want to create a visual effect where each randomly generated number is displayed on the page, but I'm facing some challenges with delays. ...

javascript

Managing loading and changing events using Angular, jQuery, and Web API

I am populating a dropdown select using ng-repeat. <select onchange="ChangeMonth()" id="month"> <option ng-repeat="(key,val) in Months" ng-selected="val==ActiveMonth" value="{{key}}"> {{val}} ...

javascriptjqueryangularasp.net-web-api

Aligning a DIV using javascript

Hey everyone, I'm encountering an issue with the JavaScript on my website. I'm struggling to center the div in order to properly display the image I click on. It seems to work fine on the second attempt, but on initial click, the div always appea ...

javascripthtmlcss

How to toggle hidden links with AngularJS or vanilla JavaScript with a click事件

When the "Show all" button is clicked, I would like to display all elements. If the "1st half" link is clicked, I want to show "abc", "def", and "ghi". When the 2nd link "2nd half" is clicked, I want to display "jkl", "mno", and "pqr". Then, when the "show ...

javascriptjqueryhtmlangularjs

Sending Form Data Across Different Domains Using CORS

Here is my straightforward AJAX post request using JQuery for direct uploading to an Amazon S3 Bucket: let xhr = new XMLHttpRequest(); xhr.open($("#FORM_ID").attr("method"), $("#FORM_ID").attr("action"), true); xhr.onload = function () { if (xhr.statu ...

jqueryajaxpostamazon-s3cors

Retrieve libraries from package-lock.json file

I am tasked with extracting all the libraries and versions from the package-lock.json file. Let me provide some context. I am implementing a security module within Jenkins to create an inventory of libraries used in each application. The goal is to gather ...

javascriptnode.jssecuritynpmlibraries

The Vuetify accordion template is not appearing due to a v-for loop issue in Nuxt.js

My goal is to set up an FAQ page using Nuxt.js. The template I obtained from Vuetify doesn't display correctly on my localhost. Instead, I'm encountering errors. If I replace 'v-for "(item,i) in 5" : key="i"' as per the template source ...

javascriptvue.jsnuxt.js

After an error occurs, the Node.js Restify code will be executed

Within a Restify route, I have set up a router handler that calls a custom module for error checking. If the code encounters an error condition, it returns next(err) and displays the error message in the browser. However, the code does not stop executing a ...

javascriptnode.jsexpressrestify

Releasing Typescript 2.3 Modules on NPM for Integration with Angular 4

Although there are instructions available in Writing NPM modules in Typescript, they are outdated and there are numerous conflicting answers that may not be suitable for Angular. Additionally, Jason Aden has delivered an informative presentation on youtu ...

javascriptnode.jsangulartypescripttypescript2.2

Automatically update certain attributes of an object with Spring MVC's auto-refresh feature

Currently, I have a table in JSP where I am populating all object attributes using Spring MVC. The backend is providing a list of DTO's which are then being added to the ModelView. In the JSP, we iterate through this DTO list and display it in the tab ...

javascriptjavaajaxjspspring-mvc

Next.js is throwing an error: "Module cannot be found: Unable to resolve 'canvg'"

I am facing an issue in my next.js project where I keep encountering the following error message: error - ./node_modules/jspdf/dist/jspdf.es.min.js:458:25 Module not found: Can't resolve 'canvg' I'm confused because I have not included ...

javascriptmaterial-uinext.js

"Utilizing mouseleave event to trigger an AJAX request in

Could an ajax request be initiated from a mouseleave event? My goal is to send the string 'Y' when the mouse exits the li element in order to update the database. Do you think this is feasible? (function(){ $('li#myId').mouseenter(f ...

jqueryajax