How can I activate a disabled option number 2 after selecting option number 1?

I have encountered an issue with my JavaScript code. The second "select" element is supposed to be disabled by default, but I want it to become enabled when an option is selected from the first "select". However, this functionality is not working as expected. https://i.stack.imgur.com/Czf9y.jpg

Here is the code snippet that I am using:

// JavaScript Document

  
  var update_select = function () {
    if ($("#edit-field-villes-tid").is(":selected")) {
        $('#edit-field-villages-tid-option-limit').prop('disabled', false);
         
    }else {
        $('#edit-field-villages-tid-option-limit').prop('disabled', 'disabled');
    }
  };
  $(update_select);
  $("#edit-field-villes-tid").change(update_select);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form  >
  <div class="views-exposed-widgets clearfix">       
           <label for="edit-field-villes-tid">Villes </label>      
 <select id="edit-field-villes-tid" name="field_villes_tid" class="form-select">
     <option value="All" selected="selected">- Any -</option>
     <option value="21">Sousse</option>
     <option value="22">Tunis</option></select>
    <label for="edit-field-villages-tid-option-limit">Villages </label>
<select id="edit-field-villages-tid-option-limit" name="field_villages_tid_option_limit" class="form-select">
     <option value="All" selected="selected">- Any -</option>
     <option value="24">El Zahra</option>
     <option value="23">Sahlool</option>
      </select>                  
      <input class="ctools-use-ajax ctools-auto-submit-click js-hide form-submit" type="submit" id="edit-submit-tunisia" name="" value="Apply">
</div></form>

Is there anyone who can assist me with this issue?

javascriptjqueryhtmlcss

Answer №1

This solution did the trick for me;

<script type='text/javascript'>
    var update_selection = function () {
        if ($("#edit-field-cities-tid")[0].selectedIndex > 0) {
            console.log("selected");
            $('#edit-field-villages-tid-option-limit').prop('disabled', false);
        } else {
            console.log("not selected");
            $('#edit-field-villages-tid-option-limit').prop('disabled', true);
        };
    };
    $(update_selection);
    $("#edit-field-cities-tid").on("change", update_selection);
</script>

Adjusting the IF condition to [0].selectedIndex > 0 made all the difference.

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

The component contains a render method, however, it does not inherit from React.Component

A component is displaying a render method, however it does not extend React.Component. This may lead to potential errors. Please modify <Test> to extend React.Component instead. When utilizing the extends-classes library, it results in a react compo ...

javascriptreactjs

Validating date inputs with ng-change in AngularJS

I am currently utilizing AngularJS along with AngularJS bootstrap within my webpage. One of the components I have is a date picker directive that is structured like this: <div class="form-group {{dateStatus.class}}"> <p class="input-g ...

javascriptangularjsdatepickerangular-ui-bootstrapangularjs-ng-change

How to programmatically update one input value in AngularJS and trigger validation as if it was manually entered by the user?

I'm currently using Angular 1.3.0rc2 and facing an issue with setting one input field based on another input field after the blur event. When I try to set the value of an input field that only has a synchronous validator, everything works fine by usi ...

javascriptangularjsangularjs-ng-form

What is the best way to determine the position of a letter within a string? (Using Python, JavaScript, Ruby, PHP, etc...)

Although I am familiar with: alphabet = 'abcdefghijklmnopqrstuvwxyz' print alphabet[0] # outputs a print alphabet[25] #outputs z I am curious about the reverse, for instance: alphabet = 'abcdefghijklmnopqrstuvwxyz' 's' = al ...

javascriptpython

Tips for resetting a bootstrap modal post form submission using jQuery

After completing an ajax request in my application, I am looking to reset the bootstrap modal. How can I ensure that the modal is reloaded fresh after it has been submitted previously? I have attempted using removeData() and .modal('dispose') me ...

jquerymodal-dialog

Aligning an element in the middle of an image vertically

Trying to vertically center a div inside an image element has been challenging. While there are many ways to achieve vertical centering in general, this specific case presents unique difficulties. To accomplish this, the following minimum code is needed: ...

htmlcss

Generating forms dynamically with Vuetify

When working with HTML code, the structure looks like this: <v-col cols="12" md="4" v-for="(leadObj, i) in lead.data" :key="i" > <v-col v-if="leadObj.inputType !=='select'"> ...

htmlvue.jsvuetify.js

jQuery, an uncomplicated demonstration of polling

As I delve into the world of jQuery, I am on a quest to discover a straightforward code snippet that will continuously check an API for a specific condition. This involves requesting a webpage at regular intervals and handling the data it returns. While I ...

jquerypolling

Error: Unable to locate the tslint command

After attempting to utilize tslint --fix, I encountered the error message bash: tslint: command not found.... To install tslint, I ran the following command: yarn global add tslint typescript. The operating system on my machine is Centos 7. ...

javascripttypescripttslint

Reload the MEN stack webpage without the need to reload the entire page

I am in the process of developing a data analytics dashboard using the MEN stack (MongoDB, Express.js, Node.js). I have successfully implemented functionality to display real-time data that refreshes every 5 seconds without the need to reload the entire ...

javascriptajaxexpressazure-cosmosdb

Perform an Ajax call just one time

$('#addToCart').click(function () { let csrf = $("input[name=csrfmiddlewaretoken]").val(); let trTable = $(this).parents('div')[1]; let customPrice = $($(trTable).children('div') ...

javascriptjqueryajax

The setInterval() function is not functioning properly when used with PHP's file_get_contents

Currently, I'm encountering an issue while attempting to use the function get_file_contents() within a setInterval(). The objective is to continuously update some text that displays the contents of a file. Below is the code snippet: <script src="h ...

javascriptphpjqueryfile-iosetinterval

Using Angular and Typescript to Submit a Post Request

I am working on a basic Angular and Typescript page that consists of just one button and one text field. My goal is to send a POST request to a specific link containing the input from the text field. Here is my button HTML: <a class="button-size"> ...

htmlangulartypescriptfrontend

The notify.js fails to display notifications in the event of an error

Why am I not receiving any error notifications even when there is an error message in the response object? $.ajax(settings).done(function (response) { if ( "error_message" in response ) { console.log(response); $.notify(" ...

javascriptajaxerror-handlingnotifications

Guide on implementing a progress bar for file uploads with JavaScript and AJAX request

I am looking to implement a progress bar in my file uploader. Below is the ajax call I have set up for both file upload and progress tracking. $(function() { $('button[type=button]').click(function(e) { e.preventDefault(); ...

javascriptjqueryajaxfile-uploadprogress-bar

Which method of loading website images is quicker: sequential or parallel, utilizing Javascript?

As I work on developing an AJAX image gallery that preloads multiple large images ranging from 120kB to 2MB before the lightbox appears, a question arises: should these images be loaded sequentially (waiting for one to preload at a time) or in parallel? Wh ...

javascriptajaxperformanceimagepreloading

Creating a notification for specific choices in a dropdown menu

I am working on a form that includes a select element with multiple options. Depending on the option selected, a different form will be displayed. My concern is if a user starts filling out one form and then decides to select another option, I want to add ...

javascriptjqueryhtmlcssforms

What is the best way to iterate through my array and display each value within my button element?

I have a challenge where I'm trying to iterate over an array named topics. This array contains the names of various people. Within my loop, my goal is to extract each name and insert it into a button as text. When I use console.log within my loop, I ...

javascriptjqueryhtml

Placing information on the opposite sides of a table cell

I am currently working on a monthly calendar table where each cell displays the date in the top left corner and has a "+" button in the bottom right corner for adding content to that day. Everything works fine when all cells have the same height, but it br ...

css

Utilize CSS to break apart text (text = white space = text) and align text in a floating manner, allowing

Is there a way to use CSS to create a white space in the middle of text? Currently, I am manually breaking the text, which is not ideal. I am aware that there is a function that allows the text to end and start in another div, but unfortunately, it is not ...

javascripthtmlcsstextstyling