EasyUI--combobox

最新推荐文章于 2023-12-16 20:32:36 发布

BtWangZhi

最新推荐文章于 2023-12-16 20:32:36 发布

阅读量451

点赞数

分类专栏： HTML&&CSS

本文链接：https://blog.csdn.net/BtWangZhi/article/details/77517326

版权

HTML&&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

用EasyUI框架后Select中的一些方法和不用框架时不一样，总结如下。

<body>
    <!-- 框架的select标签 -->
    <select id="year" class="easyui-combobox" name="dept" style="width:200px;">
    </select>
    <input type="button" onclick="getSelectOption1();">确认</input>
    <!-- 非框架的select标签 -->
    <select id="select2" style="width:200px;" onchange="getSelectItemByOnChange(this.value,this.selectedIndex,this.options[this.selectedIndex].text)">
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
        <option value="4">d</option>
    </select>
    <input type="button" onclick="getSelectOption2();">确认</input>

</body>
<script type="text/javascript">
$(document).ready(function(){
    var yearOption='<option></option>';
    yearOption=yearOption+'<option>'+2015+'</option>'+'<option>'+2016+'</option>'+"<option selected='selected'>"+2017+'</option>'+'<option>'+2018+'</option>'+'<option>'+2019+'</option>';
    $("#year").html(yearOption);

    $('#year').combobox({
        onChange:function(newValue,oldValue){
            alert(newValue+oldValue );//弹窗显示新数据和旧数据
        }
    });
}); 
//获取选择框中的值
function getSelectOption1(){
    alert($("#year").val()+$("#year").text());//弹窗显示 2015 2015201620172018，即被选择了项目的标签《》《》中间的值，和可选择的项目《》《》中间的值 
    alert($('#year option:selected').text());//显示被选择项目的《》《》中的值
    alert($('#year option:selected').val());//显示被选择项目的value值
}
//选择下拉框的值后自动执行，弹窗显示选择框的信息
function getSelectItemByOnChange(val,index,text){
    alert('value:'+val+'index:'+index+'   '+'text:'+text);//弹窗显示value：1 index：0 text：a，即被选择的项目的相关信息
}
//非框架
function getSelectOption2(){
    alert('value:'+$("#select2").val()+"text:"+$("#select2").text());//弹窗显示value:2 text a b c d,即该select下所有的可选项
    alert('value:'+$('#select2 option:selected').val()+" "+'text:'+$('#select2 option:selected').text());//弹窗显示 value:2 text:b,即被选择的项目的value和text值 
    alert(document.getElementById("select2").selectedIndex);//弹窗显示被选择的下拉框序号
    //alert($("#select2").selectedIndex);//显示undefined,Jquery没有selectedIndex这个属性
}
</script>

参考：http://blog.csdn.net/foart/article/details/6614829/

BtWangZhi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI--combobox

用EasyUI框架后Select中的一些方法和不用框架时不一样，总结如下。<body>  <select id="year" class="easyui-combobox" name="dept" style="width:200px;"> </select> <input type="button" onclick="getS
复制链接

扫一扫