utilize jQuery to load webpage with an HTML dropdown element

Querying the Campaigns:

// Getting the campaigns
$campaigns  = $wpdb->get_results(
                "SELECT *
                FROM tbl_campaigns
                ORDER BY campaignID DESC",   
                OBJECT_K
            );

// Displaying the Campaigns
<select name="campaign_list" class="campaign_dropdown">
    <?php
        foreach($campaigns as $c):
            echo '<option value="'.$c->campaignID.'" rel="'.$c->campaignID.'">'.$c->campaign_name.'</option>';
        endforeach;
    ?>
</select>

// JavaScript/jQuery
var $j = jQuery.noConflict();
$j('.campaign_dropdown').change(function(){
        if($j(this).val() != '0'){
            var rel = $j(this).closest('option').attr('rel');
            alert(rel);
        }
    });

The objective is to display the 'rel' value when selecting an option from the dropdown, however, it consistently returns an undefined message. If this issue is resolved, I intend to use it for loading another page upon selection from the dropdown.

What could be the flaw in the code?

Answer №1

Here is my suggestion:

let target = $j(this).find('option:selected').attr('rel');

Answer №2

$j('.campaign_dropdown').on('change', function(){
        if($j(this).val() !== '0'){
            var dataRel = $j(this).find(":selected").attr('data-rel');
            console.log(dataRel);
        }
    });

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

Is there a way for me to generate a preview thumbnail for my video?

Looking to add a preview effect to video thumbnails when users hover over them, displaying a series of frames from the video. Are there any jQuery plugins or tutorials available for creating this effect? ...

What is the best method for accessing a specific Data value on the route?

Hello everyone! This is my first time posting on Stack Overflow. I am currently working on developing an attendance management system for a school. In my database tables, I have the following fields: Registration: class_id, section_id, user_id. Attendanc ...

Struggling to reset the first item in an HTML select dropdown with Angular - any tips?

I am having an issue with my dropdown in a modal window. When I first open the modal, the dropdown works as expected. However, if I make a selection and then close and reopen the modal, the selected value remains instead of resetting to 'None selected ...

The ID update functionality in Node.js is malfunctioning

Hello everyone, I am currently venturing into the world of NodeJS with a goal to create a backend API for a car rental agency. After writing some code to update, view, and delete records by id stored in MongoDB, I encountered a strange issue where it only ...

The default filters are not displayed in Yii CGridView

I am facing an issue while trying to display a CGridView widget using Yii. The table is rendering correctly, but the filter input is not showing up. Here is my widget code in the view: <?php $this->widget('zii.widgets.grid.CGridView', arr ...

Transfer the file image stored in a MySQL database to an excel spreadsheet

Having an issue with capturing image data input from a PHP and HTML database to Excel. I am trying to display the images in a specific size within an Excel file. Below is the PHP code used to create the table: <?php header("Content-type: application/o ...

Adjusting the width of a nested iframe within two div containers

I am trying to dynamically change the width of a structure using JavaScript. Here is the current setup: <div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px"> <div style="width:800px;"> <iframe id="notReliable_C ...

Minify and group options available for asset managers specifically designed for traditional HTML websites

My primary focus is on working with the CakePHP framework and utilizing a fantastic plugin that minifies and groups selected assets into a single file, reducing the number of HTTP requests needed for the entire site. Currently, I am collaborating with des ...

Retrieve data from a database using Ajax and PHP's `.load()` method

I am facing a dilemma with updating a value from a database ($learner->idnumber). The scenario involves a form that posts to process.php upon submission (which then edits the database). The challenge is updating the PHP database value $learner->idn ...

What is the best way to have a form open upwards when hovered over or clicked on?

Attempting to create a button in the bottom right corner that will reveal a form when clicked or hovered over. The form should slide open slowly and close after clicking on login, but currently the button is moving down as the form opens. The button also ...

The 'export '__platform_browser_private__' could not be located within the '@angular/platform-browser' module

I have encountered an issue while developing an angular application. Upon running ng serve, I am receiving the following error in ERROR in ./node_modules/@angular/http/src/backends/xhr_backend.js 204:40-68: "export 'platform_browser_private' w ...

Limit the Jquery selection specifically to elements on the modal page

Recently I encountered an issue with a webpage that opens a modal form. The problem arises when the validation function, written in JQuery, checks all fields on both the modal and the page beneath it. //validate function function validateFields() { v ...

Encountering an ECONNREFUSED error when trying to establish a connection between Node.JS Express and MySQL running

I've been attempting to establish a connection between express and MySQL, both of which are running in separate Docker containers While everything works smoothly when Express is running locally, it fails to connect when deployed in Docker The error ...

Stryker score caused the Jenkins build to fail

Is there a way to configure the Jenkins pipeline so that it fails when the stryker score is below X? This is the stryker configuration: config.set({ mutator: "javascript", mutate: [...], testRunner: "jest", jest: { projectType: "n ...

Utilizing ngModel within the controller of a custom directive in Angular, instead of the link function

Is there a way to require and use ngModel inside the controller of a custom Angular directive without using the link function? I have seen examples that use the link function, but I want to know if it's possible to access ngModel inside the directive ...

What methods can be used to configure Jasmine to read individual Vue component files?

I recently installed Jasmine and Vue through npm, but I'm encountering an issue when trying to import the Vue component itself, which is a .vue file. It seems to be having trouble reading the template section enclosed within <template></templ ...

Is iterating through object with a hasOwnProperty validation necessary?

Is there any benefit to using hasOwnProperty in a loop when an object will always have properties? Take this scenario: const fruits = { banana: 15, kiwi: 10, pineapple: 6, } for (let key in fruits) { if (fruits.hasOwnProperty(key)) { ...

Issue TS8011 in Angular 6 is related to the restriction on using type arguments only in files with the .ts extension

I have a project in Angular 6 where I need to integrate a JS library. This library is confidential, so I can't disclose its details. The problem I'm facing is that the TypeScript compiler seems to misinterpret characters like <<24>>, ...

Plugin for jQuery that paginates text when it overflows

Looking for a solution here. I have a fixed width and height div that needs to contain text. If the text exceeds the size of the div, I want it to paginate with dots at the bottom of the page indicating each page, similar to slideshow functionality. Are t ...

What is the process for adjusting the expiration time of a GitLab accessToken?

I am currently using NextAuth for logging in with GitLab, but I am encountering an issue where my accessToken changes every 2 hours. How can I ensure that it remains valid for a longer period so that I can successfully store it in my database? It's wo ...