Отображать значения параметров из двух выпадающих меню в текстовом поле?

Question

У меня есть массив в JavaScript,

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

и другой массив, который показывает текст для каждого INT:

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

Я уже конвертированы это хэш-карту, как это:

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

Мне нужно было преобразовать values в hash, потому что у меня есть два раскрывающихся меню и текстовое поле, которое отображает значение в зависимости от двух значений пользователь выбирает из выпадающего меню

Это то, что я создал до сих пор: https://plnkr.co/edit/g89r9TdIzJFxc3r5u8h9?p=preview

Однако, теперь я хочу, соответствующее письмо значения из массива names, чтобы показать в текстовом поле. Как видно из ссылки, Z появляется в 1-м и 3-м текстовых поле, а не X для каждого. Я хочу, чтобы 1-й и 3-й текстовые поля отображали буквы из двух выпадающих меню. Таким образом, если первый выбор является X и 2-й Y, то первое текстовое поле должно показать X и третье текстовое поле должно показать Y

Как это сделать?

Answer 1

Для ответа на конкретный вопрос, похоже, проблема происходит внутри следующего блока кода:

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

Переменные el и el2 созданы немного дальше вверх сценарий, в две петли, которые создают параметры выбора. Когда первый цикл завершается, el равно последний вариант, что цикл, созданный - Z. Когда второй цикл завершается, el2 равно последний вариант, что этот цикл создано - также Z.

С el и el2 являются не изменяются, они всегда будут указывать на параметр Z в первом выпадающем меню и параметр Z во втором раскрывающемся списке соответственно.

Чтобы решить эту проблему, вам просто нужно взять метку выбранного варианта. Вы можете сделать это, используя некоторые полезные методы JQuery:

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

Вот объяснение того, что происходит:

1. $("#selectNumber1") - JQuery попытается найти элемент с идентификатором «selectNumber1»;
2. .find(":selected") - С элементами (элементами), которые jQuery находит на шаге 1, найдите child (ren), у которых есть атрибут «selected» (найти выбранный вариант); и
3. .text() - Возвращает внутренний текст первого элемента, найденного на шаге 2.

Собираем все вместе, вы будете в конечном итоге с этим:

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

Это должно работать нормально для вас, но все, что было сказано, я бы рассмотреть возможность сделать некоторые основные очистки и упрощение ваш код. Структуру данных, с которой вы работаете, трудно работать (если у вас нет выбора, потому что это то, как данные даются вам, я понимаю), переменные определены и переопределены, что затрудняет их выполнение, и некоторые из них используют jQuery в некоторых мест и прямых JS в других, что также может быть трудно следовать.

Для структуры данных, это может быть намного проще для вас, если ваши данные выглядели что-то более, как это:

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

Если ваши данные были в матрице, как это, то вы можете ссылаться на значения данных в качестве data.x.y для когда x выбирается первым и y вторым, по сравнению с data.y.x, когда имеет место обратное. Если вам нужно получить эти свойства в качестве переменных, скажите var first = "x" и var second = "y", то вы можете использовать данные [first] [second].

Вложенные свойства облегчают жизнь в этом случае.

Это просто пища для размышлений, много способов решить эту задачу.

Надеюсь, это поможет!

Полезные ссылки: 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

Проверить это один

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