What are the solutions to repair a triple drop-down menu?

I am struggling with the code below which contains numbers inside the values:

What I need is to modify all instances of the following codes:

<option value="1" class="sub_1">

To look like this:

<option value="" id="1" class="sub_1">

Basically, I want to clear out the values and assign the numbers to a different ID attribute in the option element such as id="" or data-id="".

This jQuery function helps cascade select elements based on the parent's selection:

    http://code.jquery.com/jquery-1.11.1.min.js

function cascadeSelect(parent, child) {
  var childOptions = child.find('option:not(.static)');
  child.data('options', childOptions);
  parent.change(function() {
    childOptions.remove();
    child
      .append(child.data('options').filter('.sub_' + this.value))
      .change();
  })

  childOptions.not('.static, .sub_' + parent.val()).remove();

}

$(function() {
  cascadeForm = $('.cascadeTest');
  orgSelect = cascadeForm.find('.orgSelect');
  terrSelect = cascadeForm.find('.terrSelect');
  locSelect = cascadeForm.find('.locSelect');

  cascadeSelect(orgSelect, terrSelect);
  cascadeSelect(terrSelect, locSelect);
});
<form action="#" class="cascadeTest">
  <table>
    <tr>
      <th>Organization:</th>
      <td>
        <select name="orgSelect" class="orgSelect">
          <option value="0">Select an Organization</option>
          <option value="1">Organization 1</option>
          <option value="2">Organization 2</option>
          <option value="3">Organization 3</option>
        </select>
      </td>
    </tr>
    <tr>
      <th>Territory:</th>
      <td>
        <select name="terrSelect" class="terrSelect">
          <option value="0" class="static">- All Territories -</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1</option>
          <option value="2" class="sub_1">Organization 1 - Territory 2</option>
          <option value="3" class="sub_2">Organization 2 - Territory 1</option>
          <option value="4" class="sub_2">Organization 2 - Territory 2</option>
          <option value="5" class="sub_3">Organization 3 - Territory 1</option>
          <option value="6" class="sub_3">Organization 3 - Territory 2</option>
          <option value="7" class="sub_3">Organization 3 - Territory 3</option>
        </select>
      </td>
    </tr>
    <tr>
      <th>Location:</th>
      <td>
        <select name="locSelect" class="locSelect">
          <option value="0" class="static">- All Locations -</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1 - Location 1</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1 - Location 2</option>
          <option value="2" class="sub_2">Organization 1 - Territory 2 - Location 1</option>
          <option value="2" class="sub_2">Organization 1 - Territory 2 - Location 2</option>
          <option value="3" class="sub_3">Organization 2 - Territory 1 - Location 1</option>
          <option value="3" class="sub_3">Organization 2 - Territory 1 - Location 2</option>
          <option value="4" class="sub_4">Organization 2 - Territory 2 - Location 1</option>
          <option value="5" class="sub_5">Organization 3 - Territory 1 - Location 1</option>
          <option value="6" class="sub_6">Organization 3 - Territory 2 - Location 1</option>
          <option value="7" class="sub_7">Organization 3 - Territory 3 - Location 1</option>
        </select>
      </td>
    </tr>
  </table>
</form>
javascriptjqueryhtmlcssajax

Answer №1

UPDATE:

I've made significant changes to my response due to the updated issue at hand. The current goal is to allow users to choose options based on the value of another select input.

Initially, I have set the terrSelect and locSelect to be initially disabled. This requires the user to first select an orgSelect. Upon changing the orgSelect, we then enable the terrSelect. Subsequently, we loop through all child elements of terrSelect and disable those that do not match the value of locSelect. The same process is repeated for locSelect:

<form action="#" class="cascadeTest">
  <table>
    <tr>
      <th>Organization:</th>
      <td>
        <select name="orgSelect" class="orgSelect">
          <option value="0">Select an Organization</option>
          <option value="1">Organization 1</option>
          <option value="2">Organization 2</option>
          <option value="3">Organization 3</option>
        </select>
      </td>
    </tr>
    <tr>
      <th>Territory:</th>
      <td>
        <select name="terrSelect" class="terrSelect" disabled="disabled">
          <option value="0" class="static">- All Territories -</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1</option>
          <option value="2" class="sub_1">Organization 1 - Territory 2</option>
          <option value="3" class="sub_2">Organization 2 - Territory 1</option>
          <option value="4" class="sub_2">Organization 2 - Territory 2</option>
          <option value="5" class="sub_3">Organization 3 - Territory 1</option>
          <option value="6" class="sub_3">Organization 3 - Territory 2</option>
          <option value="7" class="sub_3">Organization 3 - Territory 3</option>
        </select>
      </td>
    </tr>
    <tr>
      <th>Location:</th>
      <td>
        <select name="locSelect" class="locSelect" disabled="disabled">
          <option value="0" class="static">- All Locations -</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1 - Location 1</option>
          <option value="1" class="sub_1">Organization 1 - Territory 1 - Location 2</option>
          <option value="2" class="sub_2">Organization 1 - Territory 2 - Location 1</option>
          <option value="2" class="sub_2">Organization 1 - Territory 2 - Location 2</option>
          <option value="3" class="sub_3">Organization 2 - Territory 1 - Location 1</option>
          <option value="3" class="sub_3">Organization 2 - Territory 1 - Location 2</option>
          <option value="4" class="sub_4">Organization 2 - Territory 2 - Location 1</option>
          <option value="5" class="sub_5">Organization 3 - Territory 1 - Location 1</option>
          <option value="6" class="sub_6">Organization 3 - Territory 2 - Location 1</option>
          <option value="7" class="sub_7">Organization 3 - Territory 3 - Location 1</option>
        </select>
      </td>
    </tr>
  </table>
</form>

<script>
    $('.orgSelect').change(function(){
        selected = $(this).val();
        $('.terrSelect').removeAttr('disabled');
        $('.terrSelect').children('option').each(function(){
            if( !$(this).hasClass( 'sub_'+selected ) ){
                $(this).attr('disabled','disabled');
            }
            else {
                $(this).removeAttr('disabled');
            }               
        });
    });
    $('.terrSelect').change(function(){
        selected = $(this).val();
        $('.locSelect').removeAttr('disabled');
        $('.locSelect').children('option').each(function(){
            if( !$(this).hasClass( 'sub_'+selected ) ){
                $(this).attr('disabled','disabled');
            }
            else {
                $(this).removeAttr('disabled');
            }
        });
    }); 
</script>

Answer №2

This is the statement made by my friends that I am unable to replace values with different content

Take a look at my friends I require all codes to be formatted as follows:

<option value="1" class="sub_3">hello</option>

Transform it to :

 <option value="hello" id="1" class="sub_1">hello</option>

The values should now be replaced with "hello" and the numbers within values should fill in other ids without causing any issues for the script.

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 content within a div block is having trouble aligning vertically

I need help with centering the content inside my fixed-top navigation bar vertically. I am using bootstrap to design my page, and the navigation bar consists of an image as the nav header and a container with links. The container surrounding these element ...

htmlcsstwitter-bootstrap

Is there a way to retrieve the controller instance linked to a directive within the link function?

Is there a way to retrieve the controller instance connected with a directive within the link function? return { template: template, controller: controller, controllerAs: 'myCtrl', // What is the method for ac ...

javascriptangularjs

How to retrieve a string value from an object in Express.Js by using the key value pair

I'm wondering about the proper way to retrieve a value from an object where the key value is a string. This involves sending data from the client side and receiving it on the backend using express.js. Example of data sent from the client side: var ...

javascriptnode.jsexpress

I need to display a VARCHAR variable retrieved from PHP in a visually appealing way with HTML/CSS. What is the best way to automatically format it to prevent it from appearing as one long, uninterrupted sentence?

Is there a way to automatically format the text retrieved from a VARCHAR variable in a MySQL database via PHP so that it displays correctly with line breaks? Currently, when I display it on an HTML page, it appears as one long string. I've considered ...

phpmysqlhtmlcssvarchar

Submitting form by double clicking and pressing enter at the same time

When using jQuery Validate to validate forms, I encounter a problem where double-clicking the submit button results in my application making two entries with the same data. This issue also occurs when pressing enter multiple times. Despite researching dif ...

javascriptjqueryajaxasp.net-core

Prevent the float:left property from causing my div to overlap with another div

Is there a way to style "a" so that it can take up space and float to the left simultaneously? <div style="background:#111"> <div id="a" style="float:left; height:30px"></div> </div> ...

htmlcss

What is causing the col divs to stack instead of aligning next to each other?

I am a newcomer to Vue.JS and front-end programming in general. I wanted to create a page with a fixed sidebar and content below a navbar. Here is the configuration I tried: <template> <div class="container-fluid"> <div class ...

javascriptvue.jsbootstrap-4containerssidebar

Preventing Data Duplicates When Inserting in ASP.NET MVC

I have noticed that when sending an insert query to my Oracle database through MVC ACTION, the insert method seems to be called twice and records the same data twice... Furthermore, when using the same structure to run a select query, I am getting the sam ...

jqueryasp.net-mvcoracle

Add adhesive dashes to the text box

I am looking to add sticky hyphens in a text input field. I have included an image illustrating my requirement. The areas that need fixing are highlighted in red. The first hyphen should appear after every three number inputs, followed by the next one afte ...

htmlcssangular

Trigger the AJAX method once the partial post back has finished executing

Currently, I am facing an issue with my update panel on the webpage. Within $(document).ready(), I trigger a partial post back of the update panel. After this partial post back is done, I need to make an AJAX call like the one below: __doPostBack('&l ...

jqueryasp.netajax

The State of NgRX Entity is encountering undefined IDs

I decided to experiment with @ngrx/entity in a simple "Todo" project, where I had only one AppModule, one reducer, and a single component. However, as I delved into it, I encountered some challenges. The actions I defined were quite basic, focusing on CRU ...

javascriptangularrxjsentityngrx

Stop the default behavior of a link based on the Ajax response

A controller has been created in Magento to check if there are any products in a list. If products exist in the list, it will return true; otherwise, it will return false. The front-end below triggers an ajax call. It must remain a link and cannot be chan ...

javascriptjqueryajaxmagento

Is there a more efficient method to tally specific elements in a sparse array?

Review the TypeScript code snippet below: const myArray: Array<string> = new Array(); myArray[5] = 'hello'; myArray[7] = 'world'; const len = myArray.length; let totalLen = 0; myArray.forEach( arr => totalLen++); console.log(& ...

javascriptarraystypescript

Unable to retrieve data using Ajax post method

I'm currently facing an issue where the data I am trying to send via post to a PHP file is not being posted. Instead, I am getting an empty array in the console log from the PHP file using var_dump. Here are the snippets of code I have in these files: ...

phpjqueryajaxpost

Displaying dates in Meteor Handlebars using `{{ timestamp }}` braces

Looking to shorten the timestamp output in Meteor's Handlebar bracers. How can you convert {{ timestamp }} from Thu Jul 25 2013 19:33:19 GMT-0400 (Eastern Daylight Time) to just Jul 25? Attempted using {{ timestamp.toString('yyyy-MM-dd') } ...

javascriptjquerynode.jsmeteorhandlebars.js

What are some techniques for concealing error messages?

Can you assist in resolving this issue? There is a form which displays the inscription "You break my heart" immediately after loading, but I need it to only appear after the user attempts to enter text in the form. <div ng-app=""> <f ...

javascriptangularjs

Searching for columns should be at the top of an angular datatable, not at the bottom

In my Angular 7 project, I am utilizing the library found at this link. I have followed the example provided, which can be seen here. Everything is working perfectly, except for the position of the search columns. I would like the search columns to appear ...

javascriptcssangulardatatablesangular-datatables

What is the best way to loop through jsoup elements while skipping the initial two results?

Extracting desired data from the following HTML snippet: <div class='col5'> <strong><a href="/stellenangebote/107278-supporter-sap-crm?page=1&amp;query%5Bcity%5D=&amp;query%5Bradius%5D=100&amp;query%5Btext%5D=SOA+SAP" ...

javahtmlparsingjsoup

When the form is submitted, delete the file and its corresponding record

Currently, I have a form that deletes a record from my MySQL database. The database stores the image/file name. I am looking to enhance the statement so that it also removes the file in the website directory with the corresponding image/file name. If bot ...

phphtmlmysqldelete-rowdelete-file

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 ...

javascriptjquery