Textboxの2つのドロップダウンメニューからオプション値を表示しますか？

私はJavascriptTextboxの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配列から対応する文字値がテキストボックスに表示する：ユーザーは、これは私がこれまでに作成したものであるドロップダウンメニュー

から選択します。リンクに見られるように、それぞれXではなく、Zが1番目と3番目のテキストボックスに表示されます。私は1番目と3番目のテキストボックスに2つのドロップダウンメニューからの文字を表示したい。第一の選択肢がある場合Xと第二Yので、その後、第一テキストボックスはXを示さなければならないし、第三テキストボックスは、私がこれを行うにはどうすればよいY

を示すべき？

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

変数elとel2を作成する二つのループでは、スクリプトまでもう少し作成されます。問題は、次のコードブロック内で起きているように見える、特定の質問に答えるために

出典

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

選択オプション。第二のループが完了したときel2そのループが作成した最後のオプションに等しい、Z. - - 最初のループが完了すると、elループが作成した最後のオプションに等しいまたZ.

elとel2のであります変更されていない場合は、最初のドロップダウンではZオプションを、2番目のドロップダウンでは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を持つ要素を検索しようとします。
.find(":selected") - ステップ1でjQueryが見つけた要素で、「選択」属性を持つ子（ren）を見つけます（選択されているオプションを見つける）。
.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); 
});

は、私がやって検討するいくつかの主要なアップと簡素化の掃除あなたのコード。あなたが持っているデータ構造は扱いにくいです（データがあなたに与えられる方法であるため選択肢がないと分かります）、変数が定義され再定義され、それに従うのが難しくなります。場所やまっすぐな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

出典

2016-08-15 03:41:21 stratedge

あなたの助けてくれてありがとう！私の実際のコードは、多くの行を含むcsvファイルからデータを読み込むため、混乱を招くデータ構造については、それがあります。だから私があなたが提案した 'データ 'マトリックスに変換するのは簡単ではないでしょう – user5739619

チェックこの1

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

Textboxの2つのドロップダウンメニューからオプション値を表示しますか？

答えて

関連する問題