0

私は、ajaxとjqueryの概念を使用して、3番目のリストボックスの値を実際に動的に生成する次のコードを実行しました。それが機能するので、私はそれを最適化する必要があります。以下は私が今取り組んでいるコードです。

<html>
<head>
    <title>Comparison based on ID Number</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>     
</head>
<body>   
    {% if form.errors %}
        <p style="color: red;">
            Please correct the error{{ form.errors|pluralize }} below.
        </p>
    {% endif %}
    <form action="/idnumber/" method="post" align= "center">{% csrf_token %}        
         <p>Select different id numbers and the name of the <b> Measurement Group </b>to start the comparison</p>         
         <table align = "center">
         <tr>
            <th><label for="id_criteria_1">Id Number 1:</label></th>
            <th>        {{ form.idnumber_1 }}           </th>
         </tr>
         <tr>
            <th><label for="id_criteria_2">Id Number 2:</label></th>
            <th>        {{ form.idnumber_2 }}               </th>
         </tr>
         <tr>
            <th><label for="group_name_list">Group Name:</label></th>
            <th><select name="group_name_list" id="id_group_name_list">
            <option>Select</option>         
            </select>
            </th>
         </tr>   
         <script>
         $('#id_idnumber_2').change(
        function get_group_names()
        {
            var value1 = $('#id_idnumber_1').attr('value');
            var value2 = $(this).attr('value');         
            alert(value1);
            alert(value2);
            var request = $.ajax({
                url: "/getGroupnamesforIDnumber/",
                type: "GET",
                data: {idnumber_1 : value1,idnumber_2 : value2},            
                dataType: "json",               
                success: function(data) {
                    alert(data);
                    var myselect = document.getElementById("group_name_list");  
                    document.getElementById("group_name_list").options.length = 1;
                    var length_of_data = data.length;
                    alert(length_of_data);
                    try{        
                        for(var i = 0;i < length_of_data; i++)                  
                        {
                            myselect.add(new Option(data[i].group_name, "i"), myselect.options[i]) //add new option to beginning of "sample"
                        }
                        }
                        catch(e){ //in IE, try the below version instead of add()
                            for(var i = 0;i < length_of_data; i++)
                            {
                                myselect.add(new Option(data[i].group_name, data[i].group_name)) //add new option to end of "sample"                        
                            }                   
                        }               
        }
        });
        });
         </script>

        <tr align = "center"><th><input type="submit" value="Submit"></th></tr> 
         </table>         
    </form>
</body>
</html>

すべて正常に動作しますが、私のコードには少し問題があります。（つまり）私のajax関数は、選択リスト2に変更があった場合にのみ呼び出します（つまり）'id_number_2'。どの選択ボックスでも、3番目のリストボックスが自動的に更新されるように呼び出したいと思います。

誰かが可能な論理的な解決策でこれについて私を助けてくれますか？

4

2 に答える 2

0

2つのリストボックスのいずれかが変更された場合にajax変更機能をトリガーします。

変化する：

$('#id_idnumber_2').change(

に

$('select[id^="id_idnumber"]').change(
于 2012-09-03T09:30:56.880 に答える
0 
 $('#id_idnumber_2, #id_idnumber_1').live('change', function(){
 function get_group_names()
    {
     // Your code here
    }
 });
于 2012-09-03T09:36:41.150 に答える