首页 > 代码库 > jQuery下操作dropdownlist

jQuery下操作dropdownlist

dropdownlist呈现到html中如下:
<select id="ddlOrg" name="ddlOrg">
    <option value=http://www.mamicode.com/‘1‘>CH1
    <option value=http://www.mamicode.com/‘2‘>CH2
    <option value=http://www.mamicode.com/‘3‘>CH3
    <option value=http://www.mamicode.com/‘4‘>CH4
    <option value=http://www.mamicode.com/‘5‘>CH5
</select>
 
 
对于服务器端控件dropdownlist如果获取值
$(‘#ddlOrg‘).find("option:selected").val()
 
change事件
$(‘#ddlOrg‘).change(function(){
    var val=$(this).find("option:selected").val();
    var text=$(this).find("option:selected").text();
});
 
获取被选择的索引
$(‘#ddlOrg‘).get(0).selectedIndex;
相同效果的写法:
$(‘#ddlOrg‘)[0].selectedIndex;
--因为将DOM对象封装成jquery对象,总是会得到一个jquery对象的数组
    如果需要将jquery对象转换为DOM对象,需要用get(index)或者[index]
 
设置选择项
$(‘#ddlOrg‘).get(0).selectedIndex=1;
$(‘#ddlOrg‘).val(‘CH1‘);
$("#ddlOrg option[text=‘CH1‘]").attr(‘selected‘,true);
 
下拉项的添加和删除
$(‘#ddlOrg‘).append(‘<option value="http://www.mamicode.com/6">CH6</option>‘);
$(‘#ddlOrg option:last‘).remove();
$(‘#ddlOrg option[index=1]‘).remove();
$(‘#ddlOrg option[value="http://www.mamicode.com/1"]‘).remove();
$(‘#ddlOrg option[text="CH1"]‘).remove();
 

jQuery下操作dropdownlist