Java：下拉列表绑定后台数据

 

 

后台传进来一个List集合，存着某对象集合，将其显示在下拉列表

 

 

一、HTML代码

 

页面有个下拉列表，如图所示：

 

<td style="width:30%">
    <select id="projectInfo">
        <option value="-1">请选择</option>
    </select>                                
</td>

 

 

二、JS代码

 

将每个对象的名字和对应ID都绑定在下拉列表，页面显示其名字，后台我们又能通过其id对其进行操作

function displayProject(obj){
    var selector = document.getElementById("projectInfo");
    for(var i=0;i<obj.length;i++){
        var option = new Option(obj[i].projectName, obj[i].id);
        selector.options.add(option);
    }
}

（obj：就是后台传来的List对象集合）

new Option(text,value)

text:指定option对象的text属性(即<option></option>之间的文字)
value:指定option对象的value属性

 

三、Jquery获取选中值

 

获取选中的value

$('#projectInfo option:selected').val();

 

获取选中的text

$('#projectInfo option:selected').text();

 

四、JavaScript获取选中值

 

（1）获得下拉列表

var projectInfo=document.getElementById("projectInfo");

 

（2）获得选中项索引

var index = projectInfo.selectedIndex

 

（3）获得选中项value或text

projectInfo.options[index].value;

projectInfo.options[index].text;