user5739619 user5739619 - 1 year ago 71
Javascript Question

Display options values from 2 dropdown menus in Textbox?

I have an array in Javascript

var values = [1, 2, 0.1, 1, 3, .2, 2, 3,.3];

and another array that shows the text for each int:

var names = [1, 'X', 2, 'Y', 3, 'Z'];

I already converted this to a hash map like this:

hash = {(1,2): 0.1, (1,3): .2, (2,3): .3}

I needed to convert
to a
because I have 2 dropdown menus and a textbox that displays a value depending on the 2 values the user chooses from the dropdown menus

This is what I have created so far:

However, I now want the corresponding letter value from the
array to show in the textbox. As can be seen in the link,
appears in the 1st and 3rd textboxes, instead of
for each. I want the 1st and 3rd textboxes to show the letters from the 2 dropdown menus. So if the 1st choice is
and the 2nd
, then the 1st textbox should show
and the 3rd textbox should show

How do I do this?

Answer Source

To answer the specific question, it looks like the problem is happening inside the following block of code:

$('#selectNumber1').on('change', function(){
        firstValue = $(el).text();
$('#selectNumber2').on('change', function(){
        secondValue = $(el2).text();

The variables el and el2 are created a little further up the script, in two loops that create the select options. When the first loop completes, el is equal to the last option that the loop created - Z. When the second loop completes, el2 is equal to the last option that that loop created - also Z.

Since el and el2 are not changed, they will always point to the Z option in the first dropdown and the Z option in the second dropdown, respectively.

To solve this, you just need to grab the label of the option that is currently selected. You can do this using some helpful jQuery methods:

firstValue = $("#selectNumber1").find(":selected").text(); //For the first dropdown's selected label
secondValue = $("#selectNumber2").find(":selected").text(); //For the second dropdown's selected label

Here's an explanation of what's happening:

  1. $("#selectNumber1") - jQuery will attempt to find the element with an ID of "selectNumber1";
  2. .find(":selected") - With the element(s) that jQuery finds in step 1, find the child(ren) that have the "selected" attribute (find the option that is selected); and
  3. .text() - Return the inner text of the first element found in step 2.

Putting it all together, you will end up with this:

$('#selectNumber1').on('change', function(){
        firstValue = $("#selectNumber1").find(":selected").text();
$('#selectNumber2').on('change', function(){
        secondValue = $("#selectNumber2").find(":selected").text();

That should work just fine for you, but all that being said, I would consider doing some major clean up and simplification of your code. The data structure you have is difficult to work with (if you have no choice because this is how data is being given to you, I understand), variables are defined and redefined making it tricky to follow, and there's some use of jQuery in some places and straight JS in others, which can also be hard to follow.

For data structure, it might be much easier for you if your data looked something more like this:

    var data = {
        x: {
            y: 0.1,
            z: 0.2
        y: {
            x: 0.9,
            z: 0.3
        z: {
            x: 0.8,
            y: 0.7

If your data was in a matrix like this, then you could reference data values as data.x.y for when x is selected first and y second, versus data.y.x for when the opposite is the case. If you needed to get at those properties as variables, say var first = "x" and var second = "y", then you could use data[first][second].

The nested properties make life a little easier in this case.

That's just food for thought, many ways to accomplish the task.

Hope this helps!

Helpful links: