Question

我有一个下拉列表，该列表由使用Json的MySql数据填充。如何将第一个项目显示为“SELECT ID”并将onChange事件设置为页面上的文本字段？

基本上我想让动态下拉列表执行下面的html标记。

<select id='EmpLst' name="dwnlist" 
    onchange='document.getElementById("val1").value = this.value;'>

    <option value="">SELECT ID</option>
</select>

使用Javascript：

<script type="text/javascript">

 $(document).ready(function(){
     var hr = new XMLHttpRequest();
     hr.open("GET", "json_mysql_data.php", true);
     hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
     hr.onreadystatechange = function() {
         if(hr.readyState == 4 && hr.status == 200) {
             var d = JSON.parse(hr.responseText);
             var EmpLst = document.getElementById("EmpLst");

             for(var o in d){
                 if(d[o].title){
                     EmpLst.innerHTML += 
                         '<option value="'+d[o].title+'">'+d[o].title+'</option>';
                 }
             }
         }
     }

     hr.send("null");
});
</script>

Answer 1

只需更改此代码

即可

var EmpLst = document.getElementById("EmpLst");
    for(var o in d){
        if(d[o].title){
            EmpLst.innerHTML += '<option value="'+d[o].title+'">'+d[o].title+'</option>';
        }
    }

到

var EmpLst = document.getElementById("EmpLst");
EmpLst.innerHTML += '<option >SELECT ID</option>';
    for(var o in d){
        if(d[o].title){
            EmpLst.innerHTML += '<option value="'+d[o].title+'">'+d[o].title+'</option>';
        }
    }

Answer 2

您可以使用以下代码：

<script type="text/javascript">
    $(document).ready(function(){
    var hr = new XMLHttpRequest();
    hr.open("GET", "json_mysql_data.php", true);
    hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    hr.onreadystatechange = function() {
    if(hr.readyState == 4 && hr.status == 200) {
        var d = JSON.parse(hr.responseText);

        var selectOption = "<option value='-1'>Select ID</option>";
        for(var o in d){
            if(d[o].title){
                selectOption += '<option value="'+d[o].title+'">'+d[o].title+'</option>';
            }
        }
       $("#EmpLst").html(selectOption);// set your select options here


       $("#EmpLst").on("change",function(){
          $("#val1").val($(this).val());// set changed value to val1 text
       });
    }
}
    hr.send("null");
});
</script>

Answer 3

您必须将单个事件侦听器附加到父元素，该元素将为匹配选择器的所有子项触发，无论这些子项现在是存在还是将来添加。这个概念称为事件委托

请尝试以下代码：

将'select'标记放在div

中

<div class='container'>
    <select id='EmpLst' name="dwnlist" 
       onchange='document.getElementById("val1").value = this.value;'>

       <option value="">SELECT ID</option>
    </select>
</div>

的Javascript

$(document).ready(function() {
    $('div.container').on('#EmpLst','change',function() {
        //write your change event here
    });
})

您可以阅读有关事件委派here

的文章

onChange事件到动态创建的列表

3 个答案: