Clear Dropdown Selections prior to Submitting

When trying to change the value of the first dropdown list and reset the second dropdown before submission, I encountered an issue where the second dropdown still retains its previous selection upon submission. There is no submit button as the form is submitted on change in the dropdown menu. Here is the code snippet:

function reset() {
            $('#second').val("");
        }
<!-- First Dropdown -->
            <select class="form-select mb-3" id="first" name="first" onsubmit="this.form.reset();" onchange="this.form.submit()">
                <option value="1" >Hello</option>
                <option value="2" >World</option>
            </select>

            <!-- Second Dropdown -->
            <select class="form-select mb-3" id="second" name="second" onchange="this.form.submit()">
                <option value="1" >Hello</option>
                <option value="2" >World</option>
            </select>

Looking for suggestions or ideas to resolve this issue.

Answer №1

$('#first, #second').on('change', event =>{

  if($(event.target).is('#first')){
    $('#second').val('');
  }
  
  event.target.form.submit();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Initial Dropdown -->
<form>
  <select class="form-select mb-3" id="first" name="first">
      <option value="1" >Greetings</option>
      <option value="2" >Universe</option>
  </select>

  <!-- Secondary Dropdown -->
  <select class="form-select mb-3" id="second" name="second">
      <option value="1" >Salutations</option>
      <option value="2" >Cosmos</option>
  </select>
</form>

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

Add distinctive formatting for the final element that is not the last child

Presented with a fascinating challenge, I find myself with an ever-changing number of .child.red children. I am in need of referencing the last .child.red element dynamically using styles. Although I have attempted to achieve this on my own, I am curious a ...

Is there a way to remove a checkbox node that has already been generated?

I've been working on creating a to-do list, and I've run into an issue with deleting the checkbox once the task is complete. I attempted to create a function within the main function containing an if/else statement, but it didn't seem to wo ...

Managing several drop elements using class dynamically

I am facing a challenge in combining drag and drop listeners into one function to create dynamic zones with the same class. This will allow me to call a single function for uploading files. The upload function is currently working correctly, but I need a ...

How to locate the index.js file within my application using Node.js?

Directory Structure bin - main.js lib - javascript files... models - javascript files... node_modules - folders and files public - index.html route - javascript files... index.js package.json I am using Express and angular.js. The ser ...

What could be causing the JavaScript array to not successfully transfer to PHP?

Despite searching for solutions, I am unable to get the desired outcome. When I check my JavaScript array in the console, it appears like this: [] 0:Object stock:27 createdtime:"2016-04-08T04:00:00+0000" id:"693852404037393999" units:438 ...

Creating a Vue.js component that animates text to fade in and out within a textarea when a button

I need assistance with updating a <textarea> element in my Vue application. Currently, I have the textarea bound to some data in my state. However, when a button is clicked, I want the existing data in the textarea to fade out and be replaced with ne ...

Reduce the size of a webpage by 10%

Have you ever noticed that when you press Ctrl+- on any browser, the page scales down to 90% of its original size? It actually looks nicer at 90%, so I want my webpage to default to opening at 90% instead of 100%. I've tried following common approach ...

What is the best method to remove a value from a JSON object in a CSV file?

I received a JSON response like this: xxx: ["fsd,das"] I am looking for a way to remove the value "fsd" from the JSON object. The issue is that the response inside the JSON is not actually an array, but rather a CSV format. How can I go about deleting it ...

"Changing background color, incorporating hover effects, utilizing !important, and manipulating .css properties with

Encountered a dilemma. I devised a "tabs" feature illustrated in the following demo: http://jsfiddle.net/4FLCe/ The original intention was for the tab to change color to A when hovered over, and to color B when clicked on. However, as shown in the demo, ...

React: The error message "p is not defined" is showing up in the component file due to the no-undef

In my React application, I am looking to display a list of menu items from an array and show the detailed description of each item upon clicking. The array of menu items is stored in a separate file called dishes.js. The menu items are rendered using a Me ...

Vue3: Utilizing Bootstrap and VeeValidate 4 for Effective Error Message Handling

I am looking to integrate Vue3 with Bootstrap 4/5 and VeeValidate 4. <template> <Form as="form" @submit.prevent="onFormSubmit" class="needs-validation" :class="{ 'was-validated': wasValidated }"> ...

Ways to show alternative data from a database in Laravel 8

I am working on a project where I need to display additional data based on the option selected from a dropdown menu populated from a database. Can anyone guide me on how to achieve this using javascript or jquery? https://i.stack.imgur.com/k3WLl.png Belo ...

How can I configure Vue 2 using Vue CLI to access and utilize images stored in the src/static directory?

I'm in the process of bundling my Vue CLI application to include src/static/xyz.png so that I can easily reference it as /static/xyz.png. Unfortunately, the documentation provided by Vue doesn't offer clear instructions on how to achieve this. I ...

What is the method for verifying PHP information using jQuery AJAX?

On my PHP page, I have an else statement that filters data from a SQL database based on user input. Below is some pseudo code: NextPage.php //Include database configuration file include('../dbConfig.php'); if(isset($_POST['pageno']) ...

Retrieving CSS properties of an element using JavaScript

How can I efficiently retrieve all CSS rules associated with a specific element using JavaScript? I am not seeking a particular solution, just looking to capture all CSS rules for the given element. For example, consider the following HTML code: <div ...

Encapsulate ng-style within quotation marks

I am trying to hide a span if the value of filters[*index*] is empty. var span = "<span ng-style='{ 'display': filters[" + filterIndex + "] == '' ? 'none' : 'inline-block' }'></span>" cell.html ...

Updating a singular value in an array using jQuery/JavaScript

Within a Javascript function, I have created an array called HM_Array1. The contents of the array are listed below: HM_Array1 = [[,11,147,,,,,,,1,1,0,0,0,1,"csiSetBorder(this)","null",,,true,["&nbsp;&nbsp;&nbsp;Accoun&nbsp;&nbsp;& ...

Executing the npm run test command with the unsafe-perm flag within the lifecycle phase

My React/Redux app is working fine, but whenever I run the command below: npm run test An error occurs as shown below: 6 info lifecycle [email protected]~test: [email protected] 7 verbose lifecycle [email protected]~test: unsafe-perm in li ...

Ways to confirm the presence of specific keys in a JSON:

After successfully converting an excel sheet's content into a JSON format, my next task is to perform some validation on it. The requirement is to ensure that the jsonData variable contains specific keys in a particular order: Breakfast, Lunch, Snack ...

Ways to retrieve data from an AJAX success callback function

Within my front end JavaScript application, I need to execute an ajax request in order to retrieve data from the server. Once this data is acquired, I aim to display it within the view. var retrievedData; $.ajax({ url:"/getDataFromServer.json", ty ...