顯示文本框中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個下拉菜單的選項值？

回答

相關問題