1

HTMLファイルにいくつかの「選択」要素を動的に作成する必要があります。また、先に作成した select 要素の値に応じて、同量の select 要素を作成するつもりです。

したがって、「選択」要素のペアのセットがあります。最初の「select」要素の選択値が変更されると、2 番目の「select」要素は、データベース内の対応するレコードを使用してオプションを更新します。

私の問題は、最初の「選択」要素の正しい値を受け取ることができないことです。onchange イベントが呼び出されるたびに、onchange 関数に渡される値 (私の場合、「fillSource()」と呼ばれます) は、変更された選択された値ではなく、変更が発生する前の値です。

この問題を解決する方法を知っている人はいますか？

以下は私のJavaScriptコードです：

<script>

    var selectCount = 1;
    var cats = #{dropCatsJson};
    var subcats = #{dropSourceJson};
    function addNewSource() {

        var inputchange = document.createElement('select');
        inputchange.options[0] = new Option("pls Select", "0");
        inputchange.id="schange";

        var input1 = document.createElement('select');
        for( var i=0;i< cats.length;i++ ) {
            var s = cats[i];                        
            input1.options.add( new Option(s.Name, s.Id) );            
        }

        input1.id = 's' + selectCount;

        //input1.onchange = new Function("alert(\"input1 changed\")");       
        input1.onchange = new Function("fillSource(" + input1.value + ")");

        document.getElementById('newSource').appendChild(input1);
        document.getElementById('newSource').appendChild(inputchange);
        selectCount = selectCount + 1;
    } 

    function fillSource(input1)
    {

        var dropsub = document.getElementById("schange");
        dropsub.options.length = 0;//clear all the options.
        for( var i=0;i< subcats.length;i++ ) {
            var s = subcats[i];
            if( s.ParentId == input1.value ) 
            {               
                dropsub.options.add( new Option(s.Name, s.Id) );
            }
        }
    }


</script>

================================================== ============================= 機能する最終的なコード。次のように、新しく作成された選択要素に対して onchange イベントを追加する必要があることに注意してください。

input1.onchange = function(){fillsource(input1.value)};

ここに私のtest.htmlコードがあります:

<html> 

<script type="text/javascript"> 
var selectCount = 1;
function addNewSearch() 
{ 
     //alert("add");
     var input1 = document.createElement('select');
     input1.options[0] = new Option("s1","1");
     input1.options[1] = new Option("s2","2");
     input1.name = 's' + selectCount;
     input1.id = 's' + selectCount;
     input1.onchange = function(){fillsource(input1.value)};
     document.body.appendChild(input1);

     selectCount = selectCount +1;
     //alert(selectCount);
     var selcount = document.getElementById('selCount');
     selcount.textContent = selectCount;
} 

function fillsource(ivalue)
{
     alert(ivalue);
} 

</script> 

<form name= "Search" id= "SearchForm"  method= "post"> 

<select name= "SearchWhat" onchange = "setSearchField()"> 
<option value = "both"> Both Event and Task </option> 
<option value = "event"> Event </option> 
<option value = "task" > Task </option> 
</select> 

<label id="selCount"></label>

<input type="submit" value= "submit" name = "btn_submit"/> 
<input type="button" name= "newsearch" value= "New Search" onClick= "addNewSearch()"> 
</html>
4

1 に答える 1