如何利用js得到h:selectOneMenu所选中的label值或value值

最新推荐文章于 2019-07-09 18:53:31 发布

EvaTian

最新推荐文章于 2019-07-09 18:53:31 发布

阅读量3.5k

点赞数

分类专栏： JSF JS 文章标签： function css div

本文链接：https://blog.csdn.net/EvaTian/article/details/4024142

版权

JSF 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

5 篇文章 0 订阅

订阅专栏

一、问题阐述

    根据页面上h:selectOneMenu所选的选项，利用js和css来控制页面上另一组件的显示

二、代码

1.页面代码

<html>

<head>
<script type="text/javascript">
    function load(){

        var selectComp=document.getElementById("selectComp");
        ifShowDiv(selectComp);
    }
</script>
</head>

<body οnlοad="load()">

<h:selectOneMenu id="selectComp" value="#{backbean.ifShow}" style="width:280px;"           οnchange="ifShowDiv(this);" >

    <f:selectItem itemValue="show" itemLabel="show"/>

    <f:selectItem itemValue="dont show" itemLabel="dont show"/>

</h:selectOneMenu>

<div id="info">show the info here.</div>

</body>

</html>

2.js代码

方法一得到label值

function ifShowDiv(obj){

    var selectedLabel=obj.options[obj.selectedIndex].text;

    if(selectedLabel=="show"){
        document.getElementById("info").style.display='';
    }

    else{
        document.getElementById("info").style.display='none';
    }
}

方法二得到value值

function ifShowDiv(obj){

    var selectedbValue=obj.value;

    if(selectedbValue=="show"){
        document.getElementById("info").style.display='';
    }

    else{
        document.getElementById("info").style.display='none';
    }
}

三、注意

1.在select的value值不确定的情况下，方法一可以直接得到所选中的label值。
2.js的load方法用来确定初始化页面时被控制的div是否显示。