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

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

一、HTML代码

页面有个下拉列表,如图所示:

<td style="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;
原文地址:https://www.cnblogs.com/Donnnnnn/p/7883774.html