选择jquery不适用于从数据库中获取的值

时间:2018-02-14 10:58:01

标签: html ajax perl cgi jquery-chosen

我一直在尝试为我的selectbox添加所选的jquery,它是基于另一个从数据库中获取值。正常的选择框工作正常,所有选项都显示,但所选的jquery不起作用。 我不会在这里放置脚本标签,因为所选的jquery对于主机名的硬编码值工作正常。我已经为'host_name'滚动列表应用了jquery。

这是我试过的

$( function() {
$(".host_name").chosen();  });

或:

   $( function() {
    $("#host_name").chosen().change(host_name);  })

或:

$( function() {
    $('#host_name').trigger('chosen:updated');
})

包含用于从数据库滚动列表中获取数据的ajax的perl cgi代码:

my $JAVASCRIPT = <<'ENDJS';
function call(host)
{
//alert("in call");
var selos=document.getElementById("ostype");
var x=selos.options[selos.selectedIndex].text;

if (x){
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange=function() {
    if (this.readyState == 4 && this.status == 200) {
                                var obj=JSON.parse(this.responseText);
 var select = document.getElementById("host_name");
        for (var key in obj){

                                        var option = document.createElement('option');
                                        option.text = option.value = obj[key];
                                        select.add(option, 0);

                                        //document.getElementById('host_name').appendChild(var);
                                }
    }
  };
  xhttp.open("GET", "logic.cgi?ostype="+x, true);

  xhttp.send();

}
}

html的cgi代码

 $q->start_td({-colspan=>2}),
       $q->scrolling_list(-name=>'ostype',
-size=>1,
-id=>'ostype',
-values=>['RHEL','Windows','SLES'],
-onClick=>'together()',
-onChange=>'call()'
),
$q->end_td,



"Host name",$q->font({-color=>'red'},"*") ,
$q->end_td,
 $q->start_td({-colspan=>2}),

$q->scrolling_list({-style=>'width:150px',
-name=>'host_name',
-class=>'host_name',
-id=>'host_name',
-size=>'3',
-values=>[],
-multiple=>'true'}
),

1 个答案:

答案 0 :(得分:0)

$( function() {
$(".host_name").chosen();  });

$(".host_name") jQuery选择器选择具有主机名的所有元素(例如<div class="host_name"></div>)。

   $( function() {
    $("#host_name").chosen().change(host_name);  })

$("#host_name") jQuery选择器选择 id 主机名的所有元素(例如<div id="host_name"></div>

$( function() {
    $('#host_name').trigger('chosen:updated');
})

您也可以查看chosen() documentation的使用示例。

您的注释掉的JavaScript中出现错误:

//document.getElementById('host_name').appendChild(var);

应该是

//document.getElementById('host_name').appendChild(option);