显示文本框中2个下拉菜单的选项值？

我在Javascript显示文本框中2个下拉菜单的选项值？

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，因为我有2个下拉菜单和一个文本框，其值根据2个值显示用户从下拉菜单中

选择这是我到目前为止创建：https://plnkr.co/edit/g89r9TdIzJFxc3r5u8h9?p=preview

不过，我现在想从names阵列对应的字母值在文本框中显示。从链接中可以看出，Z出现在第一个和第三个文本框中，而不是每个都出现在X之间。我希望第一个和第三个文本框显示2个下拉菜单中的字母。因此，如果第一选择是X和第二Y，那么第一个文本框应该显示X和第三文本框应该显示Y

我该怎么办呢？

来源

2016-08-15 user5739619

所以，你要第一txtbox = 1drpdown和第三txtbox = 2drpdown。我对吗？如果是的话，为什么不使用javscript复制change事件的值 – Iceman

这样：'{（1,2）：0.1}'没有意义。你可以使用'{“1,2”：0.1}或''{“（1,2）”：0.1}'，但不能像对象属性键名一样使用'（1,2）' 。 – nnnnnn

要回答的具体问题，它看起来像问题是下面的代码块中发生的事情：

$('#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

这里是发生了什么事的解释：

$("#selectNumber1") - jQuery将试图找到“selectNumber1”的ID元素;使用jQuery在步骤1中找到的元素找到具有“selected”属性的子元素（找到所选的选项）;和
.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和第二次时，与data.y.x相反，当时情况正好相反。如果您需要将这些属性作为变量，请说var first =“x”和var second =“y”，那么您可以使用data [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

来源

2016-08-15 03:41:21 stratedge

感谢您的帮助！至于看起来令人困惑的数据结构，那是因为我的实际代码将从包含许多行的csv文件中读取数据。因此，将它转换为您所建议的“数据”矩阵并不容易 – user5739619

检查这一项

<!DOCTYPE html> 
    <html> 
     <head> 
      <script data-require="[email protected]" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
      <script data-require="[email protected]" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
      <link data-require="[email protected]" 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>

来源

2016-08-15 04:07:54

显示文本框中2个下拉菜单的选项值？

回答

相关问题