4

私は2つのドロップダウンを持っています。2 番目のドロップダウンは、1 番目のドロップダウンで選択された「値」に基づいてデータをフィルタリングする必要があります。両方のドロップダウンはバックエンドから動的に入力されます。

たとえば、最初のドロップダウンで任意の学生を選択すると、ドロップダウンの値フィールドには、学生の選択に基づいて学生番号が含まれ、2 番目のドロップダウンにはその特定の学生の科目が表示されます。ドロップダウンに表示されるデータは、バックエンド (メインフレーム プログラム) から追加されます。「*」で区切られた 2 番目のドロップダウン データの最後に学生番号を追加しました。画面に渡す前に、バックエンドから学生番号に基づいてデータを並べ替えます

これは、html と javascript コードの変更を初めて試みたものです (私はメインフレーム開発者です)。したがって、より簡単で優れた解決策があると確信しています。HTMLを自動生成する社内ツールを使用しています。dropdown-ID を指定するだけで、「select」、「options」などの他のコードが自動的に生成されます。したがって、ドロップダウン2からのデータをフィルタリングした後、非表示にし、追加した「学生番号」と「*」を含まない新しいドロップダウンを表示する必要があります。

Student1 が最初のドロップダウンから選択されている場合、2 番目のドロップダウンには Subject 1 Subject 2 が表示されます。

    HTML
<div id="dropdrop1">
<select name="StudentC" size="1" onchange="Change()" id="studentCID">
<option value="ALL">All Students</option>
<option value="0123456789">0123456789 - Student 1</option>
<option value="0023456789">0023456789 - Student 2 </option>
</select> </div>

<div id="dropdown2">
<select name="StuclassC" size="1" id="StuclassCID">
<option value="ALL">All Class</option>
<option value="1111111111">1111111111 - Subject 1 0123456789</option>
<option value="2222222222">2222222222 - Subject 2 0123456789</option>
<option value="3333333333">3333333333 - Subject 3 0023456789</option>
<option value="4444444444">4444444444 - Subject 4 0023456789</option>

<select name=newdropdown  id= "newdropdown"></select>

この後に検索ボタンがあり、グリッドに入力されます。

Javascript

    Change()
{
// text from  dropdown2
var aname = document.getElementById("StuclassCID");
var aopts = aname.options;
var adtext = new Array();
var advalue = new Array(); 
for(i = 0; i < aopts.length; i++)
{
    adtext.push(aopts[i].text);
    advalue.push(aopts[i].value);
}

//copy selected student no from dropdown1

var StuDD = document.getElementById("studentCID");
var Stuno = StuDD.options[StuDD.selectedIndex].value;


//Search for '*' in each string from dropdown2

var i,j,temp,Stunogreater;
var studrop = new Array();
var stunoa = new Array();
var showarray = new Array();
var showvalue = new Array();

var Stunogreater =False;

//Copying 'All Class' text dropdown2

 studrop.push(adtext[0]);

//separate the displayable portion from student no in the dropdown2

for (var i = 1; i < adtext.length; i++)
 {
     temp = adtext[i]; 
     var n=temp.indexOf("*");
     studrop.push(temp.substr(0, n-1));
     stunoa.push(temp.substr(n+1,10));
 }    


while( Stunogreater == False )
{
for(var j =0; j < studrop.length;j++)
 {
   if( stunoa[j] == stuno)    
     {
       showarray.push( studrop[j]);
       showvalue.push(stunoa[j]);
      }
   if (stunoa[j] > stuno)  Stunogreater = True;
  }
}         


//Copy text and value to show in a new dropdown

var sel = document.getElementById('newdropdown');
for(var i = 0; i < showarray.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = showarray[i];
    opt.value = showvalue[i];
    sel.appendChild(opt);
}

テキスト環境は現在来週まで利用できないため、このコードが機能するかどうかはわかりません。また、ユーザーが検索をクリックすると、dropdown2、つまり最後のドロップダウンの後に検索ボタンがあります。「値」フィールドのデータは、グリッドをロードするために beackend に渡されます。したがって、基本的にバックエンドはドロップダウンごとにすべての可能な値を入力し、ユーザーが検索をクリックすると、各ドロップダウンの「値」フィールドを使用してグリッドが生成されます。

効率的な方法でこれを行うように私を導く助けがあれば幸いです.私はフロントエンドに慣れていないので、あなたが何を言おうとしているのかを理解するのに長い時間がかかる可能性があるため、コードスニペットとあなたの提案を提供してください.言語。 PS: HTML と Javascript のみを使用できます (Php、Jquery などには使用できません)。

4

1 に答える 1

0

使用されていない値を単純に非表示にできる場合は、比較的単純なチェックでこれを行うことができます: http://jsfiddle.net/MaxPRafferty/SEmwG/html :

<select id="dropdown1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<select id="dropdown2">
<option>1</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
​

CSS:

.hiddenElement{display:none;}​

js:

var dropdown1 = document.getElementById("dropdown1");
var dropdown2 = document.getElementById("dropdown2");
var change = function() {
    alert("here");
    for (var i = 0; i < dropdown2.length; i++) {
        if (dropdown2[i].value.indexOf(dropdown1.value) === -1) {
            dropdown2[i].className = "hiddenElement";
        }
        else {
            dropdown2[i].className = "";
        }
    }
}

dropdown1.onchange = change;​
​
于 2012-11-07T15:58:46.583 に答える