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

"Customize the look of the action button in Material-UI's

Is there a way to customize the appearance of action buttons within a Dialog, DatePicker, or TimePicker by accessing the containing div? I'm looking to add padding between these buttons and potentially change the background color of the div generated ...

javascriptreactjsmaterial-ui

Unattended checkbox leads to AJAX feedback stalling with a spinning loading icon

Hello there! I have been working on a form that includes a checkbox, a textarea, and some input fields. I've managed to successfully submit all the form data to my localhost using POST to the database. However, I've encountered an issue when the ...

phpjqueryajaxjsonforms

How can I prevent div duplication when working with ui-router?

I created a basic demonstration to get familiar with ui router. Unfortunately, I encountered an issue of duplicated views when utilizing ui router. Below is the snippet of the stateProvider section: app.config(function($stateProvider,$urlRouterProvider) ...

javascriptangularjsroutesangular-ui-routerangularjs-routing

Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Struggling to Develop a High-Performance Interface Feature I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below: https://i.sstatic.net/E4ilD.jpg Exploration of ...

javascripthtmlcssdomcanvas

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

I'm currently working on a Whatsapp-style navigation bar and facing an issue with the sticky navbar functionality. https://i.stack.imgur.com/Cy3lA.gif Please refer to the details below for more information. To resolve this issue, I have included ...

javascripthtmlcss

Enabling the acceptance of blank values within an HTML5 date input field

When using an HTML5 date input for a field that corresponds to a nullable datetime column in the database, how can one avoid setting an empty value in the input field? In my AngularJS application, the ng-model is connected to a scope variable with an init ...

javascriptangularjshtmldate

Unlocking the Power of Session Variables in AngularJS using Ui-router

Currently, I am utilizing Angular to manage routes. On the server side, Passport is being used so that I can access the user session variable req.user in my views. However, when dealing with a route rendered by ui-router, my req.user ends up being undefine ...

javascriptnode.jssessionexpressangular-ui-router

Update content without reloading the page

I've implemented a function to delete an image in my action.js file: export const removeImage = (id, image_id) => async () => { try { const response = await axios.delete( `localhost:3000//api/v1/posts/${id}/delete/${image_id}`, ...

javascriptreactjsreduxnext.js

Ways to retrieve a variable from outside of a function

I am in need of sending the following batch data to the database, but I am facing difficulties in including the course_id along with the batchData. Currently, I am retrieving the course_id from another service that fetches data from a course table. I am ...

javascriptangularjsangularjs-scope

JQuery draggable and JavaScript functionality become disabled following an AJAX request

I have a click event declared as follows: $('body').on('click', 'input#searchVariables', function () { var datasetId = $('.TSDatasetID').val(); var term = $('#searchTextbox').val(); ...

javascriptjqueryajaxjquery-ui

Tips for automatically closing a dropdown menu when it loses focus

I'm having some trouble with my Tailwind CSS and jQuery setup. After trying a few different things, I can't seem to get it working quite right. In the code below, you'll see that I have placed a focusout event on the outer div containing th ...

javascriptjquerycsstailwind-cssdropdown

What is the best way to display a component with multiple pieces of content?

I have a tool that generates card components, extracting data from a const array and displaying it in a table format within a card UI component. I am looking to add an ADD button inside each card to open a modal with input fields. However, the issue is tha ...

javascriptreactjs

The added class is not being successfully applied to the ClassList

I'm currently working on a page where I want the colors of a button and the background to switch when the button is clicked. document.querySelector("body.light").classList.toggle("dark"); document.querySelector("button.dark").classList.toggle("light" ...

javascriptcss

Generate a revised object from a function and return it to the caller

What is the most efficient way to update and return a new object from a function? I came up with this function: export const addItemToCart = (currentCart, item) => { const { name, ...otherProps } = item; // if the item is already in the cart if ...

javascriptreactjsredux

Is there a way to prevent the letters from moving when I hover over them?

What occurs when the numbers are hovered over: https://gyazo.com/20b6426d435551c5ee238241d3f96b4d Whenever I hover over the pagination numbers, they shift to the right, and I am unsure of what mistake I made in my code that's causing this. Below, I ...

javascripthtmljquerycss

Dynamic sizing of HTML elements

I'm currently developing a timeline feature using slick slider and I'm exploring ways to dynamically adjust the vertical line height for each event based on the text content. You can view the current timeline implementation at the following link ...

javascriptphpjquery

Capturing error responses in a successful Javascript HTTP GET request

When I make an http request to a url, it returns a 500 error response as expected. However, the error is being captured in the success function instead of the error function. $http.get("myUrl") .then(function (response) { console.log(response) ...

javascriptangularjshttp

Exploring Firebase database with AngularJS to iterate through an array of objects

I'm working on an app that pulls data from a Firebase database, but I'm running into an issue. When I try to loop through the data and display it on the page, nothing shows up. However, if I use console.log to output the data, it's all there ...

javascriptangularjsfirebasefirebase-realtime-database

The map's content shifts with every scroll of the mouse, rather than being controlled by the

After creating a custom control in leaflet, I noticed that when interacting with it using scroll or click, the underlying map is affected instead of the control itself. <CustomMapControl> <div className="custom-c ...

javascriptreactjsleafletreact-leaflet

Vue: nesting components within components

Looking for a clever solution to create a nested component system with efficient rendering? Check out the code snippet below: custom-tab.vue (child component) <template> <slot></slot> </template> <script> export def ...

javascriptvue.jsvuejs2