Anzeigeoptionen Werte von 2 Dropdown-Menüs in Textbox?

Question

Ich habe ein Array in Javascript

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

und ein anderes Array, das den Text für jede zeigt int:

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

I umgewandelt dies bereits zu einer Hash-Karte wie folgt aus:

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

Ich musste values in eine hash konvertieren, da ich 2 Dropdown-Menüs und ein Textfeld, das einen Wert abhängig von den 2 Werten anzeigt der Benutzer wählt aus dem Drop-Down-Menü

Das ist, was ich bisher geschaffen habe: https://plnkr.co/edit/g89r9TdIzJFxc3r5u8h9?p=preview

Allerdings habe ich jetzt der entsprechenden Buchstaben Wert aus dem names Array in dem Textfeld angezeigt werden soll. Wie in den Link zu sehen ist, erscheint Z in den 1. und 3. Textfelder, statt X für jeden. Ich möchte, dass die ersten und dritten Textfelder die Buchstaben aus den 2 Dropdown-Menüs anzeigen. Wenn also die erste Wahl ist X und der 2. Y, dann sollte die erste Textbox X zeigen und die dritte Textbox sollte Y

zeigen Wie mache ich das?

Answer 1

die spezifische Frage zu beantworten, es sieht aus wie das Problem in dem folgenden Codeblock geschieht:

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

Die Variablen el und el2 ein wenig weiter oben das Skript erstellt werden, in zwei Schleifen, die erstellen die Auswahloptionen. Wenn die erste Schleife abgeschlossen ist, el zur letzten Option gleich ist, dass die Schleife erzeugt - Z. Wenn die zweite Schleife beendet ist, ist gleich die el2 letzte Option, dass diese Schleife erzeugt - auch Z.

Da el und el2 sind nicht verändert, werden sie auf die Z-Option in der ersten Dropdown und die Z-Option in der zweiten Dropdown-Liste verweisen immer auf.

Um dies zu lösen, müssen Sie nur die Beschriftung der Option auswählen, die gerade ausgewählt ist. Sie können dies einige hilfreiche jQuery Methoden tun:

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

Hier ist eine Erklärung, was passiert:

1. $("#selectNumber1") - jQuery wird versuchen, das Element mit der ID „selectNumber1“ zu finden;
2. .find(":selected") - Suchen Sie mit den Elementen, die jQuery in Schritt 1 findet, die untergeordneten Elemente mit dem Attribut "selected" (suchen Sie die ausgewählte Option). und
3. .text() - Geben Sie den inneren Text des ersten in Schritt 2 gefundenen Elements zurück.

setzen sie alle zusammen, werden Sie mit diesem Ende:

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

, die für Sie gut funktionieren sollte, aber alles, was gesagt wird, würde ich prüfen, einige tun großen aufzuräumen und Vereinfachung der dein Code. Die Datenstruktur, mit der Sie arbeiten, ist schwierig zu handhaben (wenn Sie keine Wahl haben, weil Ihnen so Daten zur Verfügung gestellt werden, verstehe ich), werden Variablen definiert und neu definiert, was es schwierig macht, zu folgen, und in einigen wird jQuery verwendet Orte und gerade JS in anderen, die auch schwer zu folgen sein können.

Für Datenstruktur, könnte es für Sie viel einfacher, wenn Ihre Daten etwas sah mehr wie folgt aus:

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

Wenn Ihre Daten in einer Matrix wie das war, dann könnte man Datenwerte als data.x.y Referenz für wenn x zuerst und y Sekunde gewählt wird, gegen data.y.x für wenn das Gegenteil der Fall ist. Wenn Sie diese Eigenschaften als Variablen verwenden müssen, sagen Sie var first = "x" und var second = "y", dann könnten Sie data [first] [second] verwenden.

Die verschachtelten Eigenschaften erleichtern das Leben in diesem Fall.

Das ist nur zum Nachdenken, viele Möglichkeiten, um die Aufgabe zu erfüllen.

Hoffe, das hilft!

Hilfreiche Links: https://api.jquery.com/find/ https://api.jquery.com/selected-selector/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

Answer 2

prüfen dieses

<!DOCTYPE html> 
    <html> 
     <head> 
      <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
      <script data-require="bootstrap@3.3.2" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
      <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
      <style> 
       .menu-choice-first { 
       display: inline-block; 
       } 
      </style> 
     </head> 
     <body> 
      <div class="menu-choice-first dropdown"> 
      <select class="btn btn-default dropdown-toggle" id="selectNumber1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
       <!-- note: title has class menu-title --> 
       <div class="menu-title" aria-labelledby="dropdownMenuLink"> </span> 
      </select> 
      </div> 
      <div class="menu-choice-first dropdown"> 
       <select class="btn btn-default dropdown-toggle" type="button" id="selectNumber2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
        <!-- note: title has class menu-title --> 
        <span class="menu-title"> </span> <span class="caret"></span> 
       </select> 
      </div> 
      <div class="form-group"> 
       <div class="row"> 
        <div class="col-sm-6"> 
         <h2> 
          <label for="amount_amirol" class="control-label">Result: </label> 
         </h2> 
         <h1> 
          <input type="text" id="nm1"/> has a 
          <input type="text" id="pred" placeholder="0.00" /> 
          correlation with 
          <input type="text" id="nm2"/>   
         </h1> 
        </div> 
       </div> 
      </div> 
      <script> 
       var options = ['X', 'Y', 'Z']; 
       var result = { 
        'XY' : 0.1, 
        'YX' : 0.1, 
        'XZ' : 0.2, 
        'ZX' : 0.2, 
        'YZ' : 0.3, 
        'ZY' : 0.3 
       }; 

       var select = document.getElementById("selectNumber1"); 
       for (var i = 0,length=options.length; i < length; i++) { 
        var el2 = document.createElement("option"); 
        el2.textContent = options[i]; 
        el2.value = options[i]; 
        select.appendChild(el2); 
       } 

       var select = document.getElementById("selectNumber2"); 
       for (var i = 0,length=options.length; i < length; i++) { 
        var el2 = document.createElement("option"); 
        el2.textContent = options[i]; 
        el2.value = options[i]; 
        select.appendChild(el2); 
       } 

       $('#selectNumber1').on('change', function() { 
        $('#nm1').val($('#selectNumber1').val()); 
        $('#nm2').val($('#selectNumber2').val()); 
        checkCorelation(); 
       }); 
       $('#selectNumber2').on('change', function() { 
        $('#nm1').val($('#selectNumber1').val()); 
        $('#nm2').val($('#selectNumber2').val()); 
        checkCorelation(); 
       }); 

       function checkCorelation(){ 
        $("#pred").val(result[$('#selectNumber1').val()+$('#selectNumber2').val()]); 
       } 
      </script> 

     </body> 
    </html>